Variable/scaled width images: 5x20% greater than 100%? - html

I have come across a problem when optimizing a simple site for mobile/small viewport viewing. I have 5 images, displayed immediately next to each other and have set the width to 20% with no margin, padding or anything else. However, when the viewport is reduced to the point where the images should be scaled, the last always wraps to a new line. I have created a simple test and seen this behaviour in IE and Chrome:
<html>
<head>
<title>Image test</title>
</head>
<body>
<img style="width:20%; max-width: 150px;" src="../images/image.png" alt="" />
<img style="width:20%; max-width: 150px;" src="../images/image.png" alt="" />
<img style="width:20%; max-width: 150px;" src="../images/image.png" alt="" />
<img style="width:20%; max-width: 150px;" src="../images/image.png" alt="" />
<img style="width:20%; max-width: 150px;" src="../images/image.png" alt="" />
</body>
</html>
As far as I understand, the images should never wrap since the total width of the images will never total more than 100% of the parent element.
Is this a known issue or am I missing something fundamental.

As we don't know what is the width of your container and of your images...
It may be related to the new image width calculated by the browser when scaling the image, specifically it could get "ceiled" thus exceeding the total width of the container.
e.g. img width 184px * 5 = 920px container width
after scaling down:
container width: 920px * 20% = 184px;
image width of 184px * 20% = 36.8 -> 37px
37 * 5 images = 185px exceeds the container width
try checking what is the width of your resized images, multiply it by 5 and see if it exceeds the container width.

My guess is you need a...
body {
padding:0;
margin:0;
}

Related

Max-width/height without stretching smaller images?

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" />

Scale an image only by width or height

I have an image:
<img src="#" width="42" >
If I set only the width, Firefox and IE will scale also the height, but Chrome doesn't it keep the initial image height. Can Chrome behavior be fixed ?
If I set just the height is not taken in consideration. Can an image be scaled by height ?
Setting height to auto should work. For example:
<img src="#" width="42" height="auto">
If height: auto; the element will automatically adjust its height to allow its content to be displayed correctly.
This will work for all modern browsers and works for both % and px, em sizes ect.
See W3schools
Or using inline styles:
<img src="#" style="width:42; height:auto;">
Edit: I'm not sure you did not mean give height a value and make width resize automatically. In which case width: auto should do fine.
Instead of letting HTML do the work, let CSS do it.
Change :
<img src="#" width="42" >
To :
<img src="#" style="width: 42px; height: auto;">
That will allow CSS to resize the image.
.img
{
width:auto;
height:auto;
}
You can define width and height in css

adjust image to fixed content

I'm dealing with img tags which are have a fixed width & height.
The question is that a have a set of images that each one has its own dimensions, so in the resulting view, some of them vary in height keeping the width constant.
This is what I get:
... and this is what I want to accomplish:
Is there any way that whatever image is loaded in the img tag keep proportions and be all with the same height?
you can use css and set the property of width and height to what ever you want
img
{
width : 150px;
height : 150px;
}
<img src="https://static.pexels.com/photos/57825/pexels-photo-57825.jpeg" alt="no image available" />
<img src="https://static.pexels.com/photos/149941/pexels-photo-149941.jpeg" alt="no image available" />
<img src="https://static.pexels.com/photos/163145/laptop-computer-coffee-yellow-163145.jpeg" alt="no image available" />
<img src="https://static.pexels.com/photos/7107/notebook-hero-workspace-minimal.jpg" alt="no image available" />
Please try the following:
1. Put the images into 'div's
Eg.
<div class='image-container'>
<img src="yourimage.jpg">
</div>
adjust the height of the in the stylesheet:
.image-container img{
width:100%;
height:100%;
}
adjust the width of the 'div's to fill quarter of the page:
.image-container{
width: 25%;
}

Where is my fault

<!doctype html>
<html>
<head>
<title>Satya</title>
<meta charset="utf-8"/>
</head>
<body margin="0">
<div class="topheader">
<div class="banner">
<img src="../img/header2.png" alt="header banner" width="100%" height="15%"/>
</div>
</div>
</body>
</html>
Where is my fault that i am not getting the banner at 15% of the page. I also have tried an external style sheet but that's also not working. if i remove doctype declaration from code than its absolutely working.
help me getting it right.
`
<img src="../img/header2.png" alt="header banner" style="width: 100%, height: 15%" />
width and height attributes support only pixel size, not percentage
You can either change your html to this
<img src="../img/header2.png" alt="header banner" width="100%" style="height: 15vh"/>
Or if you want to use % units, add this CSS in a separate stylesheet.
body, html, .banner, .topheader {
height: 100%;
}
vh units, in the first example, set the heigh to 15% of the screen height. Using 15% as a unit, will set it to 15% of the parent container, but your image parent does not have a fixed height, so CSS does not know how to compute this. By giving the parents of the element a fixed height this allows the image to take a percentage height.
If it were me, I would just use a separate stylesheet and add this:
.topheader img {
height: 15vh;
}
fiddle: https://jsfiddle.net/9Lcn0wf4/

Img set to max-width: 100% is publishing larger than the actual image size?

This is driving me bonkers. In my CSS is this code
img {max-width:100%; height:auto; }
But when I upload an image to the blog post that is 200x200
<img width="200" title="photo-Trent-Dysmid.jpg" style="width: 200px; float: right;" alt="photo-Trent-Dysmid.jpg" src="http://inboundmarketing.digitalhive.buzz/hubfs/jan-2016-images/photo-Trent-Dysmid.jpg" data-constrained="true">
And then preview the blog post, it is publishing it at 798x798, basically to the full width of the blog page. The only way I can get it to display at the right size is by manually changing "width: 200px" to "max-width: 200px" but what a drag to have to do that every time! What am I doing wrong?
Thanks!
Rebekah
max-width: 100%
The percentage value will refere to the width of the container the img-element is in, and not the picture itself!
Example:
<div style="width: 500px"><img src="..." style="max-width: 100%" /></div>
So if the container has a width of 500px, the img-element will have a max-width of 500px as well
You could set a custom max-width fitting the image using JavaScript and the image.onload event:
<img onload="this.style.maxWidth = this.width + 'px'" src="..." />