I published the first version of a WordPress site last week, and I am having a really difficult time figuring out the best way to have responsive images inside blog posts.
Example of a blog post with wonky images in the body.
I experimented with max-width: 100%; and width: 100%; for "img" tags, but they are still not displaying correctly, especially at smaller screen widths. I think what is throwing things off is that WordPress is adding "height" and "width" attributes to each img tag.
I'm getting pretty overwhelmed trying to find an answer to this dilemma, and I feel like other people would have had this same issue.
Here are a few things that you can do to ensure that your images always display well.
Setting max-width
It is a good practice not to exceed the original width of the image if it is not a scale-able image type.
Setting width to 100%
When you are scaling an image down and the width is set to 100%, you must free the height by setting the height property value to auto. That way, the image will scale-down without deteriorating
my-image-holder {
width: 500px; /* can be = or < the images original width */
height: 400px; /* Assuming you do not want the original height */
overflow: hidden; /* Hides vertical overlaps */
}
my-image {
width: 100%;
height: auto; /* Allows the image to scale accordingly */
}
You can use Bootstrap Class "img-responsive". Please try this code
<img class="aligncenter wp-image-167 size-large img-responsive" src="https://genofevephotography.com/wp-content/uploads/2017/12/DSC_3069-1024x683.jpg" alt="" width="640" height="427">
Related
My website hosts a lot of images of all sizes. These images are responsive and change size at all browser widths from desktop to mobile. I see in my Google Search Console that I have a poor CLS (cumulative layout shift) of .25s. The layout of my website shifts as the images load.
Since my images are responsive, I can't specify exact sizes of the images, or have placeholders to reserve the space.
What is a modern way to prevent CLS with responsive images?
Layout here: https://jsfiddle.net/exspwgab/
Update: I tried one suggestion on the internet which is to specify the image file's width and height within the img tag like:
<img src="photo.jpg" width="1504" height="752">
And then in CSS you do:
width: 100%;
height: auto;
This didn't seem to work in any browser. And the elements on my webpage still moved all over as the images loaded.
If anyone has a solution that works in all browsers please let me know. I essentially need placeholders to hold the space while the images load to prevent the page jank issue.
JSFiddle of my responsive layout here:
https://jsfiddle.net/exspwgab/
I am not sure if this is exactly "a modern solution" to the CLS issue but just trying to be helpful as much as I can.
Obviously, it's not logically possible to put constant-sized placeholders for the responsive image elements. What if we use placeholders/elements with fixed-sizes for the responsive contents?
For example:
img.placeholder-image {
width: 100%;
height: 256px;
object-fit: contain;
}
With the fixed-height, this element won't add up anything negative to the CLS policy while keeping the whole image content inside the element itself even if the viewport gets resized.
I'd very much suggest you consider using <div>s instead of <image> elements to display image contents (using background property), however, I can't vouch that's not another violation of audit rules.
My two cents.
HTML:
<img width="300" height="450" src="300x450.jpg">
CSS:
img {
height: auto;
aspect-ratio: 2/3;
max-width: 100%;
}
Target browsers:
Chrome 88+
Edge 88+
Articles:
MDN
Caniuse
I had absolutely same problem.
Solution is change width: 100% to max-width: 100%
this is implicitly stated on https://web.dev/optimize-cls/
img {
width: 100%; /* or max-width: 100%; */
height: auto;
}
If you need to do what you're doing... don't worry about it.
Tools that identify potential problems with your site don't know the context. For example, suppose my site had a huge 20 MB image that took several seconds to load. Google's tools would undoubtedly flag this as a problem. But, maybe in my example, my site is hosting scientific imagery or something that requires a lossless large image size. My users would happily spend a few seconds loading the data they need.
If the layout of your site requires that you load images that are then resized dynamically, then that's what it requires and you shouldn't worry about it.
I ended up using the solution found here:
http://davidecalignano.it/lazy-loading-with-responsive-images-and-unknown-height/#:~:text=And%20here%20is%20the%20formula,flashes%20on%20lazy%20loaded%20images.
HTML
<a class="thumb lazy-container" href="#">
<img class="lazy" data-original="image.jpg" alt="">
</a>
CSS
.lazy-container {
display: block;
position: relative;
height: 0;
}
.post .lazy-container {
padding-bottom: 55.3%;
}
.lazy-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Since all of my images have a different height, I put the padding-bottom percentage as an inline style for each image.
(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.
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.
I've been making a responsive image thumbnail gallery for a portfolio using this "Tutorial".
This tutorial is quite complete and pedagogic (I'm a big noob), but doesn't cover one part: The tutorial maker uses images that are all in landscape style.
For my portfolio, the thumbnails are going to be alternating both landscape and portrait oriented images.
Using both kinds of orientation gives a sort of an unordered look and feel to the divs, which isn't what I'm going for.
A simple way to solve this would be to manually crop portrait images to fit landscape style. It's kind of an archaic technique I'd rather not resort to.
I realize that another way to do this would be, not to use the img tags, but rather using background-image and background-contain on divs fit to the image box. Something I'd rather not do as it would mean creating a new css class for every thumbnail (I think, not sure)
Someone had the same sort of problem, but he uses jquery to fix it. Since I'm learning css, I think it might be better for me to try and fix this problem using only css.
"Link"
My major constraint is that I want the page to stay responsive, as well as have my images keep their aspect ratio, so a width:100% and height:100% is out.
If you'd like me to make a fiddle, just ask and you shall be given.
Thanks for reading, hope I made myself clear, English not being my primary language.
EDIT: Here's a fiddle showing how the <img> <div> and the css are. http://jsfiddle.net/R8B27/ (I suggest resize the "result" box to exactly see how it messes up)
L.
The main issue here is the vertical alignment of images that are cropped (in your case portrait orientated images).
If you can go with default alignment of these images, this means only the top of the image is shown, you can use this technique :
FIDDLE
The CSS I added/modified from your example :
.galleryItem a{
display:block;
position:relative;
padding-bottom:50%;
overflow:hidden;
border-radius: 5px;
}
.galleryItem a img {
position:absolute;
width: 100%;
height:auto;
display:block;
}
I had a similar situation in which the solution needed to be inclusive to both portrait and landscape pictures. This was my solution:
min-width: inherit;
min-height: inherit;
max-height: 63vmin;
object-fit: cover;
The parent object was a circle with a 'vmin' responsive size, therefore the 'vmin' 'max-height'. 'Inherit's were used to always fill the parent object and 'cover' on 'object-fit' to not lose proportion. 'Max-height' was used as the control factor due to the rarity of portrait pictures exceeding a 1:2 ratio; meaning to control the excess of width cutoff through a height variable.
As for positioning the image inside the div, I recently found the use of this excerpt very useful:
margin: 0;
padding: 0;
-webkit-transform: translate(-50%, 0%);
position: absolute;
left: 50%;
top: 0%;
With 'margin' and 'padding' at '0', you're cutting off excess weight on the pic. '-webkit-transform: translate' will allow you to change the item's origin or pick point. Setting this to '-50%, 0%' will set the origin to the center-top of the pic (this should always have negative values for the origin to be inside the item). 'left: 50%; top: 0%;' will set the placement of the origin of the item to be at center-top of the container.
In all latest browsers(supposing your not using IE anymore) you can use "object-fit" for this purpose. just add this css:
.center-cropped {
object-fit: cover;
object-position: center;
height: 200px;
width: 270px;
}
...
And in html, you can use this class directly in the img tag:
<div>
<img class="center-cropped" src="~/Images/yourImage.jpg" />
</div>
This will show only a "centered" version of your image, for both portrait and landscape images
i'm currently trying to make an image resize depending on the browser dimensions. I've managed to get the image to resize horizontally, if I make the browser window narrow the image will resize proportionally just fine. However when I resize the window vertically, Firefox just doesn't seem to want to do it! The code is pretty simple
<body>
<div id="content">
<img src="images/abc.jpg">
</div>
</body>
and the CSS:
#content {
height: 100%;
padding: 50px;
}
#content img{
max-height:100%;
max-width: 100%;
}
Another issue is that the image does seem to resize vertically in chrome, but i have to drag the bottom of the browser well over the image before it start doing this. I'd rather the image start to rezise as soon as the bottom content padding "hits" the bottom of the image so to speak. Hope this is making sense.
Any help much appreciated
try this, taken from Twitter bootstrap 2
html,body{height:100%;}
#content {padding: 5%;}
#content img {
max-height: 100%;/* Part 1: Set a maxium relative to the parent */
width: auto\9;
/* IE7-8 need help adjusting responsive images */
max-width: auto;
/* Part 2: Scale the height according to the width, otherwise you get stretching */
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
Because height could potentially go on forever, you cant set the height of anything relative to the browser window to be a function of percent. What i'm saying is that you will need to put it inside of something with a fixed height to use a per-cent value. Good Luck!
-b
You've only specified the "max-height" and "max-width" properties.
If you don't specify the actual "width" or "height" properties, the image initialy takes the width and height of its physical dimensions (if not larger than the specified max-height and max-width).
Said that, the behaviour you've noticed, is correct.
The answer is, as already mentioned, to specify also a initial width or height property, dependig wether your image is portrait or landscape.
Is that what you want?
I actually just added a height to html and body, so that #contents height doesn't get to high.
body, html {
height: 100%;
margin: 0;
padding: 0;
}
(And box-sizing: border-box to #content, because it seems like you'd want that)