The image uses object-fit: cover; aspect-ratio: 16/9; which is great until the card's limited width causes the text to reflow and changes the overall height. Now the aspect-ratio is maintained but the image height is half that of the card.
I've found that height: -webkit-fill-available; works nicely, but I can't seem to find any alternatives for non-webkit browsers.
Suggestions?
Here's the code https://codepen.io/MediaFormat/pen/zYLQjrb
EDIT: #Temani Afif suggestion helped solve this:
min-height: 100%:
Related
I would like to have a responsive image with 80vw width for example. I want it to fit entirely on the screen and keep the proportions (if the height is too large, the width should decrease)
img {
width: 80vw;
max-height: 80vh;}
Use object-fit: cover;
and look at the same question please which is below, (btw of course you can do the same thing with background-image; and background-size: cover; if you want to use a bc-image instead of <img> tag)
heres the link:
responsive image with object-fit:cover
I know this is a easy question but i just can't seem to find the solution.
I am currently using a bootstrap carousel, with 1920x1080 res images.
I want the image to stay the same, but the height to be cropped down to 480px.
Note. NO SCALING.... the image should just be cut-off, no stretching or scaling.
lets say this is my css class:
.carousel-top-img{
height: 480px;// image scaled down to 853x480px
}
.carousel-top-img{
max-height: 480px;// image stretched but 1920x480px met
width: 100%
}
It doesn't use bootstrap, but here's a pure CSS solution:
#this_img{
width: 1920px;
height: 480px;
object-fit: cover;
}
A bit more on object-fit: LINK
I hope that helps
Change the dimensions of .carousel-top-img's container and apply overflow: hidden to it.
I have a 64px that I would want to scale with browser window I have added max-width 100% but the image stays the same.
Html
<img src="../images/GitHub-Mark-64px.png">
CSS
img{
max-width: 100%;
height: auto;
}
If your image is smaller than the containing DIV, your CSS rule won't make it any bigger. Try to use width instead of max-width:
img{
width: 100%;
height: auto;
}
Addition/Edit after Comments of OP:
You can use any percentage value in this rule, like 60% (or whatever you like), but using width, not max-width (which is only a maximum limit, but not an actual size definition).
But note: It won't really look good if the original image is smaller than displayed and is "blown up".
Try using width instead of max-width in your CSS, width attribute actually sets the width of the img. However, setting it to 100% would actually cover the entire space, so perhaps you should use a lesser percentage accordingly.
Read: CSS Image size, how to fill, not stretch?
If you want to use the image as a CSS background, there is an elegant solution. Simply use cover or contain in the background-size CSS3 property.
width: 100%;
height: 100%
background-size: cover;
I find that img descendants of flexbox positioned items with max-width: 100% rule doesn't work on firefox.
I've tryed the solutions from:
Firefox 34+ ignoring max-width for flexbox
and,
Firefox flexbox image width
As the code is quite long I wrote a pen: http://codepen.io/vandervals/pen/raXBNj
As you can see in this pen, this is a problem for small sized screens. I found a not very elegant solution:
img{
max-width: 500px;
width: 100%;
}
The problem with this approach is that we lose the global use of the rule max-width: 100% for every image, no matter the actual dimensions of the image.
Has anyone solved this problem?
I cannot use JS, this should be archived by CSS only. Container (DIV) is auto width (flexible) "table-cell" element.
I'd want to scale image down only when it width is larger than container (user can resize window - that's the reason).
I've used code shown below but it work only on IE7.
max-width: 100%;
height: auto;
width: auto\9;
I've tried to find any working fix for IE9, but without success.
Your max-width needs to be set to the image size and then width to 100% like so:
img {
width: 100%;
max-width: 500px;
height: auto;
}
Of course, this means that your max-width must be dynamically set based off the image being loaded, which may not be practical.
I stumbled upon this old question while trying to do the exact same thing the OP was trying. I am answering for anyone who may land here. Upon examining http://jsfiddle.net/SAada/2/ mentioned by the OP, I found an interesting solution:
setting
height: auto;
will ensure that the image will not be stretched / scaled up. At the same time, setting
max-width: 100%
will ensure that if the parent element width is less than the image width, the image is scaled down.
Thus, the combination that works for me is:
img {
max-width: 100%;
height: auto;
}
Oh, and after some more search, I discovered that this technique is also used by Bootstrap for responsive images!