I want to prevent page-reflow, caused by image loading on a web page.
Page reflow occurs when images load after the page's text content has already rendered. There's a 'jerk' caused by the said page-reflow. It makes for awful user experience.
My requirements are:
(i) All images be fully responsive
(ii) Have a max-width of 450px (while maintaining aspect-ratio)
(iii) Be center-aligned within their containers
There can be several images on the page. All have different aspect ratios (but scaled to the same width - i.e. 450px). I know their dimensions beforehand.
Currently my code is simply:
.container {
text-align:center;
overflow:hidden;
background:whitesmoke;
border-top:1px solid #F0F0F0;
border-bottom:1px solid #F0F0F0;
}
.container img {
width:100%;
max-width:450px;
vertical-align: top;
}
<div class="container">
<img src="https://s3.ap-southeast-1.amazonaws.com/damadam-2019/public/31a1b420-59c9-405a-a197-e04dd1e2eaf9.jpg" alt="image">
</div>
This fulfils all my requirements - except it can't prevent page reflow. How do I tweak this to get my desired result?
Traditional solutions to prevent such page-reflow go something like this:
HTML
<div class="container">
<img src="https://s3.ap-southeast-1.amazonaws.com/damadam-2019/public/31a1b420-59c9-405a-a197-e04dd1e2eaf9.jpg" alt="image">
</div>
CSS
.container {
display: block;
position: relative;
padding-bottom: calc(100%/(450/562));/* example width=450px height=562px*/
height: 0;
}
.container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
This works fine. But it doesn't impose a max-width like I need it to. The image fills the entire container - as large as that container is (e.g. the full width of the screen on a laptop).
To tweak it, I tried adding max-width:450px;max-height:562px in .container img. That corrected the image's dimensions. But it gave the container extra padding at the bottom:
That's a shame. What I really wanted was for it to look like below:
Note that the gray colouration above is the background container, which simply disappears on smaller resolutions:
What's the best way for me to achieve my requirements? An illustrative example would be great.
Note: adding max-width: 450px;max-height: 561px; in .container doesn't solve the problem either.
I am using plain old css no bootstrap or anything. I want to make an img element responsive,thus shrinking and expanding while maintaining its proportions up to a maximum height. I have looked over several SO responses but have not found something that matches my use case. How would I achieve this. I have it kind of working with the following code.
<div class="imageContainer">
<img src="{{employee._image}}">
</div>
img
:max-width 100%
:height auto
.imageContainer
max-height: 300px
This solution works as the image gets smaller and it works when the image gets bigger up to the maximum height of the div at which point the image image overflows. I want it to stay within that div while maintaining its proportions. I have tried various combinations using max-height on the img and the div, but have not gotten it to work. Thanks for any help that can be provided!
The images have to be set dynamically, so hardcoding the url in css with background image is not an option.
Try setting the css top and bottom properties to 0px.
img
:max-width 100%
:height auto
:top 0px
:bottom 0px
To have an image set to a max-height of a div, the height property of the imager must be inherited from its parent.
The answer and theory around it can be found here: Child with max-height: 100% overflows parent
.container {
background: blue;
padding: 10px;
max-height: 100px;
max-width: 100px;
text-align:center;
}
img {
max-height: inherit;
max-width: inherit;
}
I believe I was able to achieve your goal like this:
img {
max-width: 100%;
max-height: inherit;
}
I have the following piece of code:
.goplots {
height: auto;
width: auto;
max-height: 50px;
float: left;
}
and this HTML code mixted with a MediaWiki image:
<div class="goplots">
[[File:{{PAGENAME}}-CC.png|Cellular components]]
</div>
The problem is that the image is resized only when modifying the width value. It does not apply the height or max-height. I tried everything without success. What is going on?
Add this
.goplots img {
max-height: 100%;
}
You need to apply max-height to the contained img as well, this will make it shrink in height if necessary while keeping its proportions to fit in its container .goplots.
I'm trying to scale images to the height of their parent which has a percentage height of its parent. This works as expected except in Chrome where the image won't scale its width proportionally once the height is reduced below the size at which it was first rendered. Any ideas on how to fix this?
<div>
<img src="http://placehold.it/100x100" alt="">
</div>
and the css:
html, body {
height: 100%;
margin: 0;
}
div {
height: 70%;
background-color: red;
}
img {
height: 100%;
width: auto;
}
JSFiddle
Removing the width property fixes this:
img {
height: 100%;
}
I'm not sure why this happens, but I'm guessing that making the width always at auto would fallback to the original width when the image is scaled down (this doesn't happen in most cases I've tried, but a certain combination might trigger it to happen that way). Not sure if it's by design or not, but I'll go ahead and try to report this somewhere.
Fiddle
Try using display: block; to make Chrome scale the image below the rendering-size:
display: block;
min-height: 100%;
height: 100%;
width: auto;
I’m trying to get an image (dynamically placed, with no restrictions on dimensions) to be as wide as its parent div, but only as long as that width isn’t wider than its own width at 100%. I’ve tried this, to no avail:
img {
width: 100%;
height: auto;
max-width: 100%;
}
Many of these images are way wider than their parent div, which is why I’d like them to resize accordingly, but when a small image pops in there and gets scaled up beyond its normal dimensions, it really looks terrible. Is there any way of doing this?
Just specify max-width: 100% alone, that should do it.
Found this post on a Google search, and it solved my issue thanks to #jwal reply, but I made one addition to his solution.
img.content.x700 {
width: auto !important; /*override the width below*/
width: 100%;
max-width: 678px;
float: left;
clear: both;
}
With the above I changed the max-width to the dimensions of the content container that my image is in. In this case it is: container width - padding - boarder = max width
This way my image won't break out of the containing div, and I can still float the image within the content div.
I've tested in IE 9, FireFox 18.0.2 and Chrome 25.0.1364.97, Safari iOS and seems to work.
Additional: I tested this on an image 1024px wide displayed at 678px (the max width), and an image 500px wide displayed at 500px (width of the image).
Setting a width of 100% is the full width of the div it's in, not the original full-sized image. There is no way to do that without JavaScript or some other scripting language that can measure the image. If you can have a fixed width or fixed height of the div (like 200px wide) then it shouldn't be too hard to give the image a range to fill. But if you put a 20x20 pixel image in a 200x300 pixel box it will still be distorted.
In line style - this works for me every time
<div class="imgWrapper">
<img src="/theImg.jpg" style="max-width: 100%">
</div>
You should set the max width and if you want you can also set some padding on one of the sides. In my case the max-width: 100% was good but the image was right next to the end of the screen.
max-width: 100%;
padding-right: 30px;
/*add more paddings if needed*/
I was also having the same problem, but I set the height value in my CSS to auto and that fixed my problem. Also, don't forget to do the display property.
#image {
height: auto;
width: auto;
max-height: 550px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
display: block;
}
I found an answer which worked for me and can be found in the following link:
Full Width Containers in Limited Width Parents
I found max-width:inherit; worked for me
I wrote this code:
div.image {
height: auto;
width: 100%;
}
div.image img {
height: inherit;
width: inherit;
}
max-width: fit-content; worked for me.
If the image is smaller than parent...
.img_100 {
width: 100%;
}
I would use the property display: table-cell
Here is the link