I have the following recurring problem that I've not been able to find an effective solution for. Others must have come across the same issue but despite searching I cannot seem to find the exact issue, although it must be very commonplace. Hopefully this question will be useful for many developers.
I am aiming to fill and center an image that is within a container div. The images may be portrait, landscape or square and have different aspect ratio's/sizes that are all variable. The container div has a fixed height but a percentage based width, so is also variable.
I am finding that with the below code the images are scaled extremely large, and any adjustment to the code results in stretching of the aspect ratio, which is not desirable. Of course cropping is inevitable but I'd like to find the best way to minimise this and display all images in the best light possible. I've added a red background to the container div as I do not want any of this to show in any instance.
I'm open to any resolutions that might be out there.
Fiddle
Live Example of problem (scale browser to see)
HTML
<div class="container">
<img src="http://lorempixel.com/1000/500/">
</div>
<div class="container">
<img src="http://lorempixel.com/500/1000/">
</div>
<div class="container">
<img src="http://lorempixel.com/500/500/">
</div>
CSS
.container {
width: 40%;
height: 350px;
display: inline-block;
float: left;
background: red;
overflow: hidden;
margin: 10px;
}
.container img {
display: block;
width: auto;
min-width: 100%;
height: auto;
min-height: 100%;
}
Related
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 tried many ways to achieve this but without success.
Basically, I want to have a div element (like a card) with an image and a text under the image and the goal is to make it responsive so that when the user scales down the browser or they use their phone, this whole div does not get messed up but keeps its proportions. The goal is to have multiple card-like divs setup in a 3x3 matrix. The requirement is that no matter what image is there, it just fills the container - the image should not keep its aspect ratio if its too big, it should always be a squere.
link to current state*
(*it says I am too low level to have images in my posts)
As you can see, the current problem is that the image itself does not fill in the container but, keeps the aspect ration which means the whole container div is different height and it gets pushed to another line instead of making it 3x3. That is as far as I got.
Code is here:
.box {
max-width: 120px;
max-height: 120px;
}
.card-image {
width: 100%;
height: 100%;
max-width: 90px;
max-height: 90px;
border: 1px solid black;
}
<div class="box">
<img ng-src="{{item.img}}" ng-if="item.img" class="app-image" />
<div style="font-size:80%;">{{item.name}}</div>
</div>
I am using angular to fill in the images but that should have no impact on the solution. As far as I know, setting width and height by adding "vw"s to these css parameters is not the best way because then it keeps these values fixed and it is not really responsive
So, at the end of the day, there are two ways you can help me out:
1) with the current code I have, add some css that will make the images stretch its height so that it is the same as width
2) suggest more optimal solution
Thank you
I think the easiest way, with nice browser compatibility would be something like this:
.item {
width: 30%;
height: 0;
padding-top: 30%;
display: inline-block;
background-size: cover;
background-position: center;
}
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
resize: both;
overflow: auto;
}
<div class="container">
<div class="item" style="background-image: url(https://dummyimage.com/600x400/000/fff)"></div>
<div class="item" style="background-image: url(https://dummyimage.com/400x400/000/fff)"></div>
<div class="item" style="background-image: url(https://dummyimage.com/300x400/000/fff)"></div>
</div>
The image will always fill the whole container, and container will keep ratio. You will need to work a little bit on multi row layout, but still I find it the easiest way.
.card-image {
width: 100%;
height: 100%;
max-width: 90px;
max-height: 90px;
border: 1px solid black;
object-fit:fill; /* try fill,cover,contain for different results*/
}
For more info Object fit CSS tricks
I cannot figure this out. I would like 3 images to sit side by side inside a 930px wide div.
so, when you enter into responsive design mode, or drag the screen browser width wise to make it smaller all the 3 images stay side by side inside the div without wrapping to the next line.
But automatically start to re-size to fit the re-sized div.
The 3 images only start to resize correctly inside the div only when the 3rd image has wrapped under the second image. So it looks like this below.
[]
[]
[]
Once all the images are vertically aligned the images then start to shrink down correctly. But this image wrapping under the next image is no good for me, as when viewing the website on a mobile phone, or when re-sizing the screen the images are still super large.
Must be a way to stop these images from wrapping underneath each other, and just stay inline but automatically re-size themselves
as the div/page width shrinks down?
I've tried white-space: nowrap; display: inline; inline-block; even display: table-cell; nothing seems
to do what I need it to do. However, if I use only one image instead of 2, or 3 then it works perfectly fine.
You're probably thinking why not just put all 3 images inside 1 image in photoshop? Well each img is an href link, so that's not possible.
Even floating the images all to the left still doesn't help.
Here's my CSS/HTML
img {
max-width: 100%;
height: auto;
}
then
<div style="width: 930px; max-width: 100%; border: 1px solid blue;">
<img src="camera.png"> <img src="lights.png"> <img src="action.png">
</div>
Can someone tell me where I may be going wrong please? How can I stop images wrapping underneath other images when the parent container shrinks down.
I've had to resort to using multiple #media queries of different pre-fixed image sizes per break-point. But there's got to be a much much easier way. Something so simple that I'm missing.
I figure I might share a flexbox solution as well. I've included the code below so it should be relatively self explanatory. Feel free to leave a comment below if you think I should clarify anything.
.container{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
}
img {
flex: 1;
max-width: 100%;
height: auto;
max-height: 310px;
}
<div class="container" style="width: 930px; max-width: 100%; border: 1px solid blue;">
<img src="https://cdn.vox-cdn.com/uploads/chorus_image/image/44336734/fujifilmx100t-1.0.0.jpg">
<img src="https://d3k7s9wfq6lao0.cloudfront.net/latest/37504/main/7.jpg">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/33/Clapperboard%2C_O2_film%2C_September_2008.jpg">
</div>
you can use inline-block for this. you will need to alter the width with media queries as your screen gets smaller
img {
display:inline-block;
width: 33%;
height: auto;
}
you should also wrap the images in a div.container and give this div a width:100%
Image width set to 100% occupy all the horizontal space of the container, since you want to fit three images inline to each other, divide the 100% by 3 so that when the container is resized the three images will occupy one third of the available space. The margin-left: -2px is to make sure that the image border don't touch the edge, otherwise it will wrap to new line. Try this sample:
CSS:
img {
display: inline-block;
width: 33%;
height: auto;
margin-left: -2px;
box-sizing: border-box;
}
HTML element:
<div style="width: 930px; max-width: 100%; border: 1px solid blue;">
<img src="camera.png">
<img src="lights.png">
<img src="action.png">
</div>
My answers' more or less a follow up to Tom's which I'm writing on here so I don't overflow the comments section.
The problem with max-width: 100% is that the relative sizing doesn't start to kick in until each image outgrows its parent, in this case, the div. Since all images have a default absolute size based on their image src they force themselves onto a new line before resizing and so only then will max-width start doing what you want it to. As per Tom's response, the percentage sizing of 33% forces the images to have a relative size which causes them to shrink immediately.
Naturally 'img' tags are given the display of inline which means you could opt to just use the following code:
img {
width: 33.3%;
}
Now here's the biggest gotcha I had when dealing with inline images.
A display of inline and inline-block is respective of the whitespace
that exists within your HTML markup.
Therefore the small presence of whitespace below whilst not evident is enough to cause images to still move over to a new line.
img {
width: 33.3%;
}
<div style="width: 930px; max-width: 100%; border: 1px solid blue;">
<img src="https://picsum.photos/250/250/?random1">
<img src="https://picsum.photos/250/250/?random2">
<img src="https://picsum.photos/250/250/?random3">
</div>
But once this whitespace is removed the images all fit perfectly across the screen whilst resizing.
img {
width: 33.3%;
}
<div style="width: 930px; max-width: 100%; border: 1px solid blue;"><img src="https://picsum.photos/250/250/?random1"><img src="https://picsum.photos/250/250/?random2"><img src="https://picsum.photos/250/250/?random3"></div>
Now compressing the HTML markup above makes it rather unwieldy and so as an alternative, you could opt to use the floating method. By setting a float of left for each image you'll force each 'img' tag to sit flush, regardless of the extra spacing between them. Just be sure to give the parent div a float of left as well or an overflow of auto to stop it from collapsing.
img {
width: 33.3%;
float: left;
}
After many days testing various ways out here's the perfect way to do this without flex. Make sure each image is wrapped in its own div that's important.
<style>
* {
box-sizing: border-box;
}
img {
width: 100%;
max-width: 100%;
height: auto;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
</style>
Now, here's where I've changed it up a little bit for more flexibility. Since each image is now in its own div we can then make the image width: 100%; or max-width: 100%; then add the width: 33.33%; part that used to be under img {} to each of the new 3 div columns instead.
<div class="row">
<div class="column"> /* 33.33% width */
<img src="flash-tooltip.png">
</div>
<div class="column"> /* 33.33% width */
<img src="html-tooltip.png">
</div>
<div class="column"> /* 33.33% width */
<img src="portables-tooltip.png">
</div>
</div>
Lot's of people provided great advice.
The easiest way is using flex. But, something people don't tell you when using flexbox. You should still wrap each of the images inside their own div container. Otherwise, you will get some weird things happening when you encase them in hyperlink anchors, that is if all three images are just placed inside the first flex container div. And without their own div container images won't keep any kind aspect ratio when they shrink/enlarge. They just squash and skew together.
And finally very important! Always make sure any images inside a flex container is set up the same way. Either width: 100%; or max-width: 100%; otherwise, the images will not shrink up/down at all in Google Chrome.
I've included this same method as above, only this time in a flexbox version.
This code shows the image at 100%. The images are too big to be shown at 100% in the space where this code will be inserted, thus I need to show them using scrollbars.
<div style="overflow: auto; margin: auto; margin-bottom: 1em;">
<img src="">
</div>
This code shows the image at 100% with scrollbars within a 500px x 500px division. I don't; however, want a fixed size for the outer division.
<div style="width: 500px; height: 500px; overflow: auto; margin: auto; margin-bottom: 1em;">
<img src="">
</div>
I want to adjust the outer division to act as a picture viewer for seeing full size images with scrollbars.
I want the outer division to fill the available horizontal space, which I do not know and will change depending upon the viewer's monitor. The height should auto adjust but not fill the available space as there will be a series of such picture viewer divisions stacked vertically.
The images I will be inserting are large and will 99.9% of the time exceed the available space thus I need the scrollbars.
I don't want the pictures to be resized to the size of the outer division or vice versa.
I can't use any scripts or active content. It must be pure css and html only.
I cannot hard code the pixel sizes of the images as a application will be inserting the image code via a loop and the application does not have any ability to insert the image's width or size.
Keep the outer wrapper at width: 100% and figure out a height that fits your use case.
For responsiveness, I get it suits you better to select the height based on viewport units so that it doesn't fill or stretch beyond the available height (I am taking 50vh here as an example)
Maybe this also helps you.
Snippet below:
body{
margin: 0;
}
*{
box-sizing: border-box;
}
.wrapper{
overflow: auto;
border: 1px solid;
width: 100%;
height: 50vh; /* adjust / omit this as per your requirement*/
}
.wrapper img{
display: block;
}
<div class="wrapper">
<img src="http://placehold.it/1500x1500">
</div>
I think you can do this with either an iframe, or using overflow: scroll with 100% width. It's the height you'd need to figure out. I would suggest using media queries maybe for the height.
Here's a sample jsfiddle that I think is pretty close to what you're looking for. Again, your height is what you have to figure out. The parent div will always take up the full height of the children unless you specify.
.image-wrapper {
width: 100%;
height: 50vh; /* as suggested below in another answer, or you can use media queries */
overflow: scroll;
}
<div class="image-wrapper">
<img src="http://www.spyderonlines.com/images/wallpapers/image/image-20.png">
</div>
https://jsfiddle.net/adpro/bt7aar4b/
Started playing around with SVG and am having trouble getting it to position the way i want to. What I want to achieve is for my SVG to come in front and locked to the bottom of the border-div and be centered on the page as well as resize when the window is resized (responsive). So far I've played with the viewbox and height/width properties of the SVG to get the responsive behavior but I can't figure out to not have the SVG slip under the rest of my page(see picture to have a better idea of what's hapenning). I tried to play with the z-index and position:absolute but to no avail. Here's what I have so far for my code: (I use the bootstrap framework with SASS)
HTML
<section>
a first section
</section>
<section class="parallax1">
<div class="container-fluid">
<div class="row">
<div style="height:500px;">
<div class="col-sm-12 border-div">
<div class="col-sm-12">
<svg xmlns="http://www.w3.org/2000/svg" class="svg-test" viewBox="0 0 500 375">my SVG</svg>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
Another section
</section>
CSS
.border-div{
height:100px;
background-color: $orange-background;
}
.svg-test{
left: 50vw;
width: 100%;
height: 600px;
}
.parallax1{
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url("../images/bkgnd.jpg");
}
What i get right now is something like this:current result
And what I am looking for is this:desired result
Preliminary remarks
A few remarks about your problem, which may also explain why you haven't received any answers in such a long time:
Your problem is about the positioning of an SVG image in an HTML document. Playing around with ViewBox won't solve your problem, as this merely dictates what the SVG image should show, and not how the SVG image should be positioned within a parent document, in this case a HTML document. In fact, you could replace the SVG image with a DIV countainer and nothing would change about the solution.
It isn't really clear what you want:
Does come in front and locked to the bottom imply that you want the SVG image to appear when the user scrolls, or with some animation? Or does it mean you want the SVG to be placed there statically, independent of any event?
Does centered on the page mean horizontally only? If you meant also vertically, I don't understand how it should be in relation to the height requirements of the DIVs, or the requiement that it should lock to the bottom of the border-div.
And does resize when the window is resized only mean change its width or also its height? Because you've defined the height as 600px, which clearly won't respond to any resizing of the window.
slip under the rest of my page - I thought the SVG should be on top of everything else?
It's not clear whether the first and the last sections should have a stable width, or be responsive. And how they should relate to the 500px. A bit of CSS for them would be good.
So the 100px of border-div should be part of the 500px? In the "screenshots" it doesn't seem like it, but the code you posted suggests so.
Also, there are some inconsistencies in your formulation of the problem:
The width of the SVG is defined as 100%, but your pictures show that it's clearly not 100%. After all, if it were 100%, you wouldn't have to worry about centering it, either.
The height of the SVG is defined as 600px. If that was the case, it would be taller than the parent DIV, which is only 500px. The pictures show something different.
Last but not least, left: 50vh will make your SVG start at the horizontal center of the page, and not center it. If you want to center it, it should be (100% - width)/2 and not 100%/2.
Possible solution
In any case, here's the HTML code and the accompanying CSS styles to get what I (possibly incorrectly) interpret you are asking for:
<section id="first">
A first section
</section>
<section id="height-500">
<div id="border-div">
<div id="relative">
<div id="bottom">
<svg>
</svg>
</div>
</div>
</div>
</section>
<section id="another">
Another section
</section>
And here the CSS:
#first,
#another {
background: #808000;
height: 150px;
width: 100%;
height: 150px;
}
#height-500 {
background: green;
height: 500px;
position: relative;
}
#border-div {
background: #008080;
height: 100px;
position: absolute;
bottom: 0;
width: 100%;
}
#relative {
position: relative;
width: 100%;
height: 100%;
}
#bottom {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
svg {
display: block;
background: #f00;
width: 20vw;
height: 20vw;
margin: auto;
}
Explanation of key points
Setting the position: relative of #height-500 allows you to position #border-div at its bottom. This trick will be used again for #relative and #bottom to place the SVG at the bottom of #border-div (setting width and height to 100% allows the dimensions of #relative to be identical to #border-div).
Setting the width and height of the SVG to 20vw indicate that we want the SVG to be a square, each side being 20% of the viewport width. If you change the width of your browser, the SVG will resize too.
margin: auto are used to place block elements in the horizontal center. Note that we need to turn the SVG into a block element for this to work, by setting display: block. (Note that margin: auto doesn't work for really old browsers, but there are workarounds with some additional DIVs.)
If you want the height of the SVG remain the same, you may want to play around with the preserveAspectRatio attribute to indicate you you want to deal with the changing aspect ratio.
Note that the viewport width vw also includes the scrollbar and isn't supported by some older browsers. However, there are other methods of keeping the aspect ratio, in case that's a requirement for you.