https://pastebin.com/2AY6s2tm
html
<picture>
<!-- _1_1_2, _16x9 -->
<source srcset="/media/img/raster/4fe4c2e2-b8f3-4c88-a06d-2f44e76f53ef/img_width_70_height_39_dpr_1x_ver_4.webp 1x" type="image/webp" media="(max-width: 359px)">
...
<source srcset="/media/img/raster/4fe4c2e2-b8f3-4c88-a06d-2f44e76f53ef/img_width_339_height_190_dpr_1x_ver_4.jpg 1x" type="image/jpeg" media="(min-width: 1920px)">
<img loading="lazy" width="70" height="39" src="/media/img/raster/4fe4c2e2-b8f3-4c88-a06d-2f44e76f53ef/img_width_239_height_134_dpr_1x_ver_4.jpg" alt="Trololo">
</picture>
css
img {
width: 100%;
}
Well, lazy loading.
Images should include width and height.
Documentation: https://web.dev/browser-level-image-lazy-loading/#images-should-include-dimension-attributes
If we don't include width and height, layout shifts can occur.
So, if we include width and height, then a clever browser calculates its proportions. And allocates the necessary space for the element.
Please, have a look at the image. I stipulated width = 70 and height = 39.
This seems reasonable. This image's aspect ratio is 16 : 9.
height = 70 * 9/16 = 39.375 ~ 39.
If I'm not mistaken, exact pixels are not important here: screens will always be different in mobile world.
Problem
As we can clearly see, width fits the width of the parent element. But the height is still 39. It has not been recalculated.
And of course, this distorted the whole aspect ratio of the image.
Could you help me here.
I would imagine if you set in CSS width:100%; you also need to explicitly set the height:auto;.
img {
width: 100%;
height: auto;
}
You may also find some structural advice here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
Related
I have modal images on my site, and I have set a max-size (in the css code) on them so they're not too big when opened up.
But, I also have some images that are smaller than my set max-size, and these are now getting stretched out when clicking on them. I don't want that. I want them to stay in their original size, even though they're small.
How do I do this?
This is the html and css (and Javascript) I've been using:
https://www.w3schools.com/howto/howto_css_modal_images.asp
Is there something in there that's stretching out my smaller images?
First warp the images into a <div> </div>
Then set that min-width to the div not the images
css
.wrapper {
min-width:; /*set min width*/
max-width:; /*set max width*/
}
.wrapper img{
width:100%;
object-fit:contain;
}
html
<div class="wrapper">
<img src="image.jpg">
</div>
If you set the max width and height for images then they will not exceed those but if the image's natural dimensions are both smaller they wont expand (unlike if you had set width or height). There will be no stretching or distortion, just larger images will be show smaller than their natural size.
This snippet shows images of various natural dimensions with their 'limited' versions following - the max width and height having been set as the smaller of 50% of the viewport dimensions and an absolute pixel size.
img.limited {
max-width: min(50vw, 500px);
max-height: min(50vh, 250px);
}
max-width = min(50vw, 500px);<br> max-height = min(50vh, 250px);<br>
<br>img dimensions 100 x 150<br>
<img src="https://picsum.photos/id/1015/100/150" />
<img class="limited" src="https://picsum.photos/id/1015/100/150" />
<br>img dimensions 1000 x 300<br>
<img src="https://picsum.photos/id/1016/1000/300" />
<img class="limited" src="https://picsum.photos/id/1016/1000/300" />
<br>img dimensions 200 x 200<br>
<img src="https://picsum.photos/id/1018/200/200" />
<img class="limited" src="https://picsum.photos/id/1018/200/200" />
<br>img dimensions 300 x 1000<br>
<img src="https://picsum.photos/id/1019/300/1000" />
<img class="limited" src="https://picsum.photos/id/1019/300/1000" />
I have images that are dynamically pulled and cannot be certain of the image size or ratio of the image.
Using bootstrap4 (and wordpress) i'm trying to scale the image so that it fills the width and height of the div, and if possible maintain the aspect ratio (its ok if the image gets portions cutoff).
My image is currently breaking the height of the div and the image will size outside of the div.
.blog-home {
max-width: 570px;
max-height: 225px;
}
.blog-home img {
object-fit: cover;
max-height: 210px;
}
img {
max-width: 100%;
height: auto;
}
<div class="row article">
<div class="col-md-6 blog-home">
<picture width="778" height="312" class="attachment-large size-large wp-post-image">
<source type="image/webp" srcset="..." sizes="(max-width: 778px) 100vw, 778px">
<img src="..." sizes="(max-width: 778px) 100vw, 778px">
</picture>
</div>
<div class="col-md-6">
....
</div>
</div>
My tags are dynamically replaced with tags. I can't sort out how to fix this without breaking the responsive-ness of the layout.
Then I would suggest that you use background-size: cover. Here is the definition according to https://www.w3schools.com/cssref/css3_pr_background-size.asp.
Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges
Use Cover to resize the background image to cover the entire container.
Here is an example link:
https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover
The best solution would be to cut or crop the images somewhere in the wordpress, here is a good read on why and how it can be achieved. In case your images are already in the Media Library - use Regenerate Thumbnails plugin to fix all of them in one click.
I think there are a lot of styles involved in the case, so it won't be so easy to get which exact part of it breaks the output without inspecting the full source, however in the worst case you could add .blog-home {overflow:hidden} to cut all what goes outside the div.
I've been struggling some hours trying to understand how the picture tag exactly works. I'm able to load different art directions at specific screen sizes using the <picture> tag in combination with <srcset> but I can't seem to find how I make these responsive.
I gave the <picture> element a class named .header-img. I tried to set media queries for the class and adjust the size of it. But when I try to set a width to .header-img, the width doesn't change.
Maybe an important detail, the <picture>element is inside a grid
<picture class="header-img">
<source media="(max-width: 500px)" srcset="./assets/img/header/header-bg-sm.png">
<source media="(max-width: 1100px)" srcset="./assets/img/header/header-bg-md.png">
<source media="(max-width: 1300px)" srcset="./assets/img/header/header-bg-lg.png">
<img src="./assets/img/header/header-bg-lg.png" alt="ISB header">
</picture>
Any help is really really appreciated !
Add this to your CSS:
.header-img img {
max-width: 100%;
}
And also, you have a container with property width of 70rem.
You should change the property width to max-width like so:
.container {
max-width: 70rem;
...
}
I am trying to get responsive images working and I have this layout so far...
.container {
display:flex;
max-width:1000px
}
.col1 {
flex:1;
background:teal;
text-align:center;
}
.col2 {
flex:1;
background:wheat;
text-align:center;
}
.img-responsive {
max-width:100%;
height:auto;
}
<div class="container">
<div class="col1">
This is column 1
<img
class="img-responsive"
src="https://dummyimage.com/1000x1000/000/fff"
srcset="https://dummyimage.com/1000x1000/000/fff 1000w,
https://dummyimage.com/750x750/000/fff 750w,
https://dummyimage.com/400x400/000/fff 400w"
sizes="(max-width: 1000px) 1000px,
(max-width: 7500px) 750px,
(max-width: 400px) 400px,
1024px"
">
</div>
<div class="col2">
This is column 2
</div>
</div>
I am expecting the 1000px image to be displayed when the screen is 1000px and above, the 750px version at 750px and above and so on...
But it only ever gives me the large version, where am I going wrong?
There are a number of reasons this might happen:
Your browser has probably cached the larger version of the image already, so it's more efficient to use it than to hit the network for a new copy.
The device pixel ratio is > 1.0, causing the browser to request a higher than expected resolution version
The presented width of the image is greater than the next smallest image in the srcset.
On closer examination, there are a few odd things going on with your example.
You're using sizes as though it's a media query for the element; those min/max width media queries work the same as they do elsewhere, though, which is to say that they apply to the size of the viewport, not the element. The default is 100vw, which is the width of the viewport. You might need something instead like 50vw.
sizes is evaluated in order; the first match will be used. In your case, that's (max-width: 1000px), which will be true for viewports <= 1000px. This means you're asking the browser to load the largest of your proposed images.
The use of max-width instead of min-width is a little unusual, especially in conjunction with 1:1 ratio between the max-width and the requested image size. You would more commonly see something like (min-width: 768px) 600px, 100vw, which tells the browser to load an image for a presented size of 600px if the viewport is wider than 768px (our example mobile stacking breakpoint), and otherwise to load one for display at the full width of the viewport (that's the 100vw fallback).
Finally, you have an extra double-quote (") right before the closing bracket of your img tag, though I don't know if it is affecting your example or not.
Try using a picture tag in place of your img tag. Place the sources form largest size to smallest size, with the a default img tag at the end.
Like this:
<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
If we're using the srcset and sizes attributes, it is still useful to specify a src attribute as a fallback. Similarly, I imagine that older browsers would also take advantage of width and height attributes if they were specified. But do modern browsers?
For example:
<img
src="foo100x100.jpg"
srcset="foo100x100.jpg 100w, foo500x500.jpg 500w, foo900x900 900w"
sizes="100vw"
width="100"
height="100"
alt="example"
>
Are the width and height attributes of any use to a modern browser in this example?
Based on experimentation, it behaves as if you had specified width and height CSS properties in pixels. However, it can be overridden by your own CSS.
img {
width: 200px;
/* height will be 100px because of the HTML attribute */
}
<img
src="http://placehold.it/100x100"
srcset="http://placehold.it/100x100 100w, http://placehold.it/500x500 500w"
sizes="100vw"
alt=""
width="100"
height="100"
>
This is a bit disappointing, as I was hoping that modern browsers would use width and height HTML attributes to determine what the aspect ratio of the image was before downloading the image, so as to avoid the layout of following content jumping around as the page loads.