It is often said that it's best to specify image sizes in img's HTML attributes, width and height. That way the browser can reserve the space for images that haven't initially been loaded yet, so that once they do load, they don't change the page layout by making the content below them jump as they appear. (I'm sorry to say I don't know what this technique is named so I don't really know how to search for this question specifically, thus this question)
What I'm wondering is how this is solved in responsive layouts? I know on a big desktop browser my news articles' images may be 400x300 px, for example, but I can't put that into my document, as:
<img src="/thumbs/article_image_400_300.jpg" width="400" height="300"/>
Because on a smaller browser I would also like my images to be smaller. But I would still like to keep this behaviour of reserving space, if possible.
Can this be done?
Put the height and width attributes into your HTML, showing the actual size of the image file you are using.
Then add this to your CSS to allow images to scale responsively while maintaining their aspect ratio:
img {
max-width: 100%;
height: auto;
width: auto;
}
Now set your desired image width for each breakpoint in your media queries, as a percentage of the width of the parent element.
For example:
img.medium {
width: 60%;
}
img.small {
width: 30%;
}
The widths set in your CSS will override those set in the HTML.
Related
(Similar questions are already asked at stackoverflow, but this question has more constraints, such as both a specific max-width, max-height, a required specific height and width, and no layout shift.)
Problem:
I want to have a responsive image with the following constraints:
max-width: 100%, so that it doesn't overflow to the right, and that it is responsive when reducing the screen width.
max-height: 200px, so that large images are reduced in rendered dimensions.
height and width html attributes set, so that the browser can precalculate the required image dimensions, so that the layout doesn't shift/move elements beside/below the image, while the image is loading. (To reduce the cumulative layout shift.)
image aspect ratio should stay 1:1
no extra margins should be created around the image
the image should be rendered with a plain html img tag, not with css background-images
the image should not be rendered in a larger dimension than its original dimension
How can I achieve this with CSS?
(If CSS cannot achieve this, then maybe in JavaScript?)
What I tried
I tried several CSS features, such as object-fit and max-width: 100% etc, but I always get at least one of the contraints failing while trying to fix another constraint. For example, object-fit creates margins/paddings for the image when it's reduced in size when the screen size reduces, as if the image border isn't reduced. This is demonstrated in the following code:
https://codepen.io/Devabc/pen/mdVvyKq
/* Should appear to the right of the Wombat */
.beside {
float: left;
background-color: lightgreen;
border: 1px solid;
height: 200px;
width: 100px;
}
/* Should appear below the Wombat */
.below {
background-color: red;
border: 1px solid;
width: 100px;
height: 300px;
clear: both;
}
img {
display: block;
float: left;
max-width: 100%;
max-height: 200px;
border: 1px solid;
/* Without this, aspect ratio is not normal.
But with this, it creates an unwanted margin. */
object-fit: scale-down;
object-position: left;
}
<img
height="533"
width="799"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Vombatus_ursinus_-Maria_Island_National_Park.jpg/800px-Vombatus_ursinus_-Maria_Island_National_Park.jpg"
/>
<div class="beside">This text should be directly to the right of the Wombat, without any margin between the Wombat and this text.</div>
<div class="below">This text should be directly below the Wombat, without any margin between this and the Wombat.
The dimensions of the original Wombat img are:
width: 799px, height: 533px</div>
(The green text should be to the right of the Wombat, without margin. But object-fit causes a padding/margin to appear with the length of the original image.)
It's feels almost as if this isn't possible with CSS, even though these requirements shouldn't be too much to ask nowadays, with responsive design being important.
How can I fix this with HTML/CSS?
I've been struggling with this for years on end, but just today I figured a way to do it when you know the image's aspect ratio, hope it helps:
Start by defining a --img-ratio CSS custom property in the img element corresponding to the image's height / width ratio.
<!-- example of a square image (height / width = 1) -->
<img src="..." style="--img-ratio: 1" />
Knowing that our desired max-height is 200px (or you could go with a generic --max-height), we know 2 variables of the equation:
ratio = height / width
width = height * ratio
Applying this:
img {
--max-height: 200px;
/* Set a baseline width for your element */
width: 100%;
/* And limit it with our function above (pick 100% with min() if this size is bigger than parent's width to prevent overflowing) */
max-width: min(100%, calc(var(--max-height, 200px) * var(--img-ratio, 1)));
}
And there we go! This should work to limit the height without extra margins even in complicated flex layouts.
Let me know if this answer is unclear, hope it helps 🌻
PS: If you can't know the ratio of the image beforehand, than maybe JS is indeed your only option - I'm yet to find an alternative 😟
If CSS cannot achieve this, then maybe in JavaScript?
I wouldn't solve this with JavaScript. I understand you want to use width & height on img elements to mitigate content layout shifts, but in this case since you must have a max-height of 200px on the image, it will cause issues on images with larger natural width. The space you see between the green text & the Wombat is not margin or padding, it is that actual content width which you have defined as 799px.
You can solve this with a bit of preparation on the data you wish to present to the user. Prepare your width as you would expect what your image width would be. width=799 in this case is unrealistic because the image will not respond as far as that because of the max-height:200px limitation - same case with height=533. The whole point of using static measurements such as unit pixels is you are already declaring that this X element will just take Y space.
<img
height="200"
width="300"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Vombatus_ursinus_-Maria_Island_National_Park.jpg/800px-Vombatus_ursinus_-Maria_Island_National_Park.jpg"
/>
If your problem is that your webpage/website is not responsive, so I would suggest you to use Viewport Units like vw for width and vh for height instead of px or % for all your elements including border and font-size because it will help you make your webpage/website responsive.
It should solve your issue but if it doesn't let me know in the comments, I will try my best to help you.
I have an img element that looks like:
<img src="header-900x600.jpg" class="header-image" alt="" width="900" height="600" style="background-color: rgb(4, 96, 247);">
With the css:
.header-image {
display: block;
max-width: 100%;
max-height: 400px;
width: auto;
height: auto;
}
Now this is meant to force the image to resize to be max-height: 400px, or max-width: 100% whilst keeping its aspect ratio. Although when loading the image collapses into:
And after the image loaded, it pushes the text down:
I thought that since the image has the width and height inline, the browser would know it's aspect ratio already, and the image wouldn't be jumping around? Is there something I am missing?
All I want is the image element, before the image source has loaded, to be in the same aspect ratio as the image will be. Making the layout not jump around!
All major browsers are now capable of doing exactly this in their current versions.
When you specify width and height attributes in HTML on the img tag and in CSS you set a width (percentage or fixed, also max-width is valid) and height to auto (or vice versa) the browser calculates the correct size and aspect ratio out of it, until the image is loaded. When the image is loaded, it uses the dimensions of the loaded image, so these should not differ from the attributes you set, otherwise you will get a layout shift again.
Note, however, that an invalid image or an image that cannot be loaded might be treated differently than a not yet loaded image. It is not guaranteed that width and height attributes of the img are considered. (This is especially important if you want to test the behavior, you cannot simply remove the value of the src attribute, this won't get you the same result as a not yet loaded image.)
Also note that there are still issues with responsive images (picture element and srcset attribute of img element) as described in the follwing link.
A great article with more detailed info and browser support can be found here: https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/
Note: Simply providing width and height to your images can result in a way better result in the new Lighthouse CLS (Cumulative Layout Shift) measurement, see https://web.dev/cls/
The browser doesn't know anything about the image until it is loaded. You can't set parameters of an element that doesn't exist. Instead, simply add the image into a container with full width, like so:
<div class="container">
<img src="header-900x600.jpg" class="header-image">
</div>
.container {
display: block;
width: 100%;
}
.header-image {
display: block;
max-width: 100%;
max-height: 400px;
}
Also what Tarik says in his answer is correct, if you are declaring auto height and width then max-height and max-width are doing nothing.
You set the width and height to auto. This means that the size will be set to the currently loaded image rather than anything to do with the max-height or max-width.
Note that this is probably a duplicate of CSS: Keep Aspect Ratio of an Element for Given Height
To be clear, when you set width and height to auto, you are overriding the other settings that you set and telling the browser to detect the size of the image. While the image is downloading, it cannot, so it behaves as you describe.
You could programmatically use javascript to set these properties after you detect that the image is done loading.
I want a background image to appear at the top part and fully cover the width of a page. As you can see, the image is quite wide and short - https://i.imgur.com/aJb6eBr.jpg. This should be the header image of a page, with the contents of the page appearing below it.
If the browser's width is bigger than the image's original width, the image's width and height should be enlarged proportionally (together with its container - thus pushing downwards the page's contents that appear under the image).
If the browser's width is smaller than the image's original width, the image should retain its original size without shrinking, and be cropped from both sides until a 15% crop is reached from each side (You can see that the image has quite wide green areas on both sides which are safe for cropping).
The tricky part is that once 15% of the crop has been reached from each side, I want the image to start shrinking proportionally to the browser's width, thus the middle 70% of the image will always be seen, and the image will never be cropped more than 15% from each side.
The height of the image (and it's container) should rescale automatically in proportion with the image's width. If the image's height (together with its container) shrinks to be smaller than it's original size, the page's contents are pushed up so the distance between the page's contents and the image is always kept the same.
I'm looking for a clean solution (preferably with CSS only) similar to this:
https://demodern.de/projekte/mediengruppe-rtl
Any ideas guys?
In terms of using CSS it is pretty simple to make everything work as you need. In order to do this you might use the image as it is via and the same image on a parent element's background. But you will have to adjust your CSS to work with this image ONLY. In case if you will try to use another image - you will have to adjust paddings or mediaqueries. Solution that works a kind of ONE time for a specific image, but still, it doesn't use JS at all, which is great. And regarding referencing the image twice - it is not a problem for a browser. It will make only one http request for a single unique media asset so no performance problems from this perspective.
Here is a way how you might do what you want:
.wrapper {
background: url(/images/_m1NuVvd.jpeg) 50% 50% no-repeat;
background-size: cover;
overflow: hidden;
position: relative;
padding-top: 38%;
}
.wrapper img {
transform: translateX(-50%);
left: 50%;
position: relative;
min-width: 100%;
display:none;
}
#media screen and (min-width: 1338px) {
.wrapper {
padding-top: 0;
}
.wrapper img {
display: inline-block;
vertical-align: top;
}
}
<div class="wrapper">
<img src="/images/_m1NuVvd.jpeg" />
</div>
Make sure to use a proper path to your image instead of /images/_m1NuVvd.jpeg.
BTW, in future it will be better to probide links to the images in a way, so those might be reused in jsfiddle. Dropbox doesn't allow to use the image via that link.
Best wishes
This question already has answers here:
CSS: center and scale up or down image while preserving aspect ratio
(4 answers)
Closed 7 years ago.
I am building a responsive website. On the homepage I have a number of articles whose thumbnails should be displayed at 230px * 115px at full size desktop output. The article publishers will be uploading images of all sizes with no particular set aspect ratio.
I currently just have code to resize an image based on it's parent container. the width will be 100% of it's parent container and the height is automatic and will vary depending on which aspect ratio of the original image.
.img {
width:100%;
height:auto!important;
}
Is not really cutting the mustard.
My research suggest using a background img with background-size:cover. Is this a good way to go is it possible to center the cover horzontally and vertically? And work responsively?
Abit more direction would be great there are alot of articles our there but I can't find the exact answer to my needs.
update: #LGSon That's Great thankyou. It's the best solution I have tried so far.... I like the way the image is controlled within the div. Perfect. I guess the difference is now how to control the aspect ratio of the div. if i set the width to 50% the height it still fixed.
Your <img> rule is good, but you have to pack each <img> into another container that gets a percentage-based width and height: auto;
You can do this:
CSS
div {
display: block;
overflow: hidden;
}
.img {
width: 200%;
height: auto!important;
margin: -50%;
}
HTML
<div>
<img class="img" src="http://a5.mzstatic.com/us/r30/Purple5/v4/5a/2e/e9/5a2ee9b3-8f0e-4f8b-4043-dd3e3ea29766/icon128-2x.png">
</div>
DEMO HERE
You should set the image rule to, along with your other rules.
.img {
width:100%;
max-width:100%;
}
Will you know the dimensions of the image or are they unexpected?
The rule above is meant if you control the image and its accordance to your ratio in the design.
height is auto by default and adding !important to it does not make much of a difference.
Using a background image is a neat feature but cover will not do the job as expected. It covers the container with the images stretches or shrunk as needed to fill it entirely. Background images are also not recommended for performs reasons as they are loaded regardless of being displayed on the page or not as part of the css file, unless you load CSS files on demand with that request which is not necessary.
Hoep this helps, I will be glad to clarify.
I also disagree with the comment made about setting the parent container's height to auto as it does nothing. This is the default behaviour...
I'd like the carousel to scale proportionally the background image
in this question Bootstrap Carousel Image does not scale proportionately it is suggested to leave the image explicit dimension but I can't understand what it means.
Set this in your HTML
For every img element in your carousel, you can set the width property to 100% like this (although you shouldn't need to if the natural resolution is larger than the control):
<img src="http://i.imgur.com/OEdBxVD.jpg" width='100%'>
normally, this image would be too small to expand fully, but 100% scales it up.
make sure you don't have the width or height set to any pixel sizes
jFiddle
Since the image is going to go full screen, you should try to get your hands on a resolution that will naturally try to take up the full width available. When the browser has to scale the image up, it will cause artifacts.
What they mean is to leave off the width=px and height=px from the image (or image styles). You can set width="100%" and leave off the height. The browser will scale proportionally for you.
Try this option without the inline styles. Just add this to your stylesheet to override the bootstrap.css style.
.carousel .item {
width: 100%;
/*slider width*/
max-height: 600px;
/*slider height*/
}
.carousel .item img {
width: 100%;
/*image width*/
}