the header image i have obviously wont fit to all browser width so i used following css to take auto adjust it to the browser width. however, if i dont specify the height attribute the div does not appear. specifying height as auto or % does not work either. only way it works is giving a fix px. but then that will make the whole design non responsive on small devices as the height will stay constant. please advise
<div fxLayout="column">
<app-nav-bar></app-nav-bar>
<div fxLayout="row" fxLayoutAlign="start stretch" style="background: url('../../assets/images/header1.png') no-repeat;background-size: 100%;height:300px">
</div>
</div>
Try using "background-size:cover" instead of 100%.
For those using React: the material-ui-image will automatically make the image full screen like so:
<Image style={{marginLeft: '-24px', marginRight: '-24px', marginBottom: '24px', marginTop: '-24px'}}
src={'https://images.unsplash.com/photo-1579037611768-298fcaad76e2?auto=format&fit=crop&w=1000&h=625&q=60'}
onClick={() => console.log('onClick')}
aspectRatio={(16 / 9)}
disableSpinner
/>
Related
I have a list of episodes that I want to have a fixed height. I tried to line-clamp-2 for the episode title that has text that is longer than 2 lines.
Everything is working on my normal PC view, even if I open Dev Tools and view it as device view, it still displays as I want, but after I use my real phone, which is iPhone to view it, it has a problem which I wasn't expecting at all because there's none when I was CSS it on my PC.
What I did, I set every episode item of mine to fixed 70px height, have 12px padding to left and right, and 0.25rem padding for top and bottom. I tried the solution like this post: line clamp (webkit) not working in safari
Which is to put the overflow-hidden and line-clamp to the div instead of the actual p tag, and in the p tag using the inline display, but in my case, it is not working.
I'm using a tailwindCSS to CSS my component in React. Here's how I tried so far:
<div className="lg:h-[calc(100vh-60px)] overflow-y-scroll bg-[#222] h-[30vh] max-lg:mb-[20px]">
{listEpisode.map((item, i) => (
<Link
to={`episode-url`}
key={i}
className="w-full h-[70px] px-[12px] leading-normal
py-1 hover:text-white hover:opacity-80 hover:bg-white/20
duration-200 ease-in-out line-clamp-2 overflow-hidden
odd:bg-[#111111] even:bg-[#272727]"
>
<p className="inline after:whitespace-pre">
{item.title}
</p>
</Link>
))}
</div>
The result I get when in Dev Tools on Chrome, I set viewpoint to iPhone 6/7/8 (because I'm using iPhone 7, too)
PC with device viewpoint (working as expected):
On the actual device using safari - mine is iPhone 7 (which is not working as I expect it to be):
I don't know what's the cause of this, so I can't come up with a solution to fix it, because it was normal on PC.
I've managed to handle this through test here and there a bit around my CSS.
I change a little bit how I style it. First, I set my a tag as a flex and set a fixed height for it (I change my fixed height to 80px, looks better for me), with padding, and margin stuff around the a tag and my a tag is the parent element, then inside, I wrap my paragraph p tag inside a div, I
don't set that div to have any height, so it'll take auto height, inside a div, which now is a paragraph, I finally set it to line-clamp-2 directly.
Here's the result that I have now on my device, the PC is always working fine:
Note: I have 2 div inside the a tag because I changed my mind on how to make it suit my liking, and that's why I have some div that has flex, you might not need it, but I hope those who have the same problem get an idea.
This is my Tailwind CSS:
<div className="lg:h-[calc(100vh-60px)] overflow-y-scroll bg-[#222] h-[30vh] max-lg:mb-[20px]">
{listEpisode.map((item, i) => (
<Link
to={`episode-url`}
key={i}
className="flex items-center h-[80px]
px-[12px] py-[8px] w-full hover:text-white
hover:opacity-80 hover:bg-white/20 duration-200 ease-in-out"
>
<div className="mr-[6px] h-full flex items-center justify-center text-amber-400 ">
<p className="font-extrabold px-[4px] border-r-[2px] opacity-80">
{i+1}
</p>
</div>
<div className="mx-[6px] w-full flex">
<p className="line-clamp-2 w-full text-[#E2DFD2]">
{item.title}
</p>
</div>
</Link>
))}
</div>
<>
<div
className={
"border-2 border-amber-400 flex-shrink-0 w-[200px] h-[300px]"
}
>
<img
src={img}
alt="Background Image"
className="object-cover h-250 w-200"
/>
Pictureeeee
</div>
</>
I want the container always be constants to h-250 and w-200 for the layout.
Even if I set it to h-250 and w-200, it does not seem to work that way. I want the image to fill or stretch to cover all the spots if necessary. Also, that ? box to be h-250 and w-200 as well.
You have missed a very small detail while using arbitary values, As there is no class named h-250 and w-200 you are not able to see the desired height and width
Change
className="object-cover h-250 w-200"
to
className="object-cover h-[250px] w-[200px]"
I am new to NextJS and was using its Image tag to have an image in my application. But the image size only changes if I change its width value, changing height's value does not impact it at all.
Here is the image:
<Image src="/Logo.png" alt="Logo" height={10} width={100} />
Here the image is taking the width's value and coming out to be big. If I replace the values in height and width, then also it takes the width's value and becomes small. I have even tried to put height property after width but nothing changes.
What am I doing wrong here?
You can wrap the Image component inside a div and style it like this:
<div style={{ position: "relative", width: `${100}px`, height: `${10}px` }}>
<Image
src="/Logo.png"
alt="Logo"
fill
style={{ objectFit: "contain" }}
/>
</div>
Note that:
The wrapper div has a relative position since fill Images are absolute positioned inside the DOM
fill is a prop in next 13 (older versions use layout="fill")
objectFit is passed inside the style object (with optional objectPosition) and those properties will be added to the rendered span element style properties
Wrap tag in a with the height and width you want your image to be
Add layout="fill" in the tag
<div style={{width: '100px', height: '100px'}}>
<Image
src="/Logo.png"
alt="Logo"
layout='fill'
objectFit='contain'
/>
</div>
I'm trying to use the Next.js' <Image> component with the layout=fill option. Therefore I've created a relative div that contains the Image tag. But I'd like to determine the height by the Image height.
Found this example but height is statically given there. So I've tried this based on the example.
<div className="relative w-full h-full">
<Image
src={post.coverImage.url}
layout="fill"
alt={post.title}
/>
</div>
I've also tried h-full or max-h-full classes instead of h- tags but couldn't succeed.
How can I make its height automatically determined?
I had the same issue and figured it out after inspecting the element. The problem is how Image component takes place in DOM.
This the Image component on DOM, look there are 2 divs and inside "img" is placed. So you have to target the outer div that wraps img.
// I add img-wrapper class
<div className="relative w-full h-full img-wrapper">
<Image
src={post.coverImage.url}
layout="responsive"
alt={post.title}
/>
</div>
and in css:
// targeting the first div
.img-wrapper > div {
// this will take full-height, u can adjust it
height: 100%;
}
I have code as below div is draggable and Resizable using JQuery.I want the inner textare to be resized automatically based on resized div.With code below it works fine for width but it does not acquire full height of div .
<div class="dragDiv" id="dragDiv"> <textarea style="width:100%;height:100%;background-color:Transparent;font-family:Arial;font-size:11pt;border: 1px;color: white;" id="Text" name="Text"></textarea>
<br/><input type="submit" value="Mark" onclick="MarkImage()" />
</div>
Everything below the jQuery resizable div needs to have height set to -something- in CSS (or absolute positioning with top and bottom both set). e.g.:
<div class="Resizable">
<div style="height:100%">
<div style="height:100%">
<textarea></textarea>
</div>
</div>
</div>
quick demo: http://jsfiddle.net/cwolves/KkNRb/
height: 100% works only if parent has a fixed height defined in style or css.
Here, you need to calculate height with scripts and update it when parent div resizes.
You can use attribute alsoResize of JQueryUI's resizable. In my case the following code worked perfectly:
var box=$('#dragDiv');
box.resizable({alsoResize: box.find('textarea').css('resize', 'none'),
minHeight: '200',
minWidth: '400'});
Also I've disabled browser built-in resizing of texarea to prevent it from getting out of the parent div.