I'm facing a rather challenging html/css problem. I'm trying to build an image gallery with thumbnails below. The design needs to be fluid and able to scale down for mobile.
The requirements,
Container needs to maintain 4:3 aspect ratio regardless of image
size within
Container max-width 665px and the min-width:300px
Image within needs to align center / middle
When the browser scales down the container to the point in which it meets one of the image sizes, the image must scale down
with the container.
I've successfully been able to get the container to scale correctly with the code below, but the image doesn't maintain vertical middle nor does it scale with the container. The container scales behind the image as if the image is just floating on top of the container.
JS Fiddle Example
http://jsfiddle.net/2kmtmzxv/18/
Example code
<div id="image-container">
<div id="dummy"></div>
<div id="image">
<div>
<img src="http://www.gannett-cdn.com/-mm-/d3038439ef7e9ad854298da49122ea72ad452f6a/c=186-0-2724-1908&r=x513&c=680x510/local/-/media/USATODAY/USATODAY/2014/08/22/1408738143000-2015-Chevrolet-CorvetteZ06-026.jpg"/>
</div>
</div>
</div>
css
#image-container {display:inline-block;position:relative;width:100%;max-width:665px;min-width:300px}
#dummy {padding-top:75%/* 4:3 aspect ratio */}
#image {position:absolute;top:0;bottom:0;left:0;right:0;background-color:grey}
#image div img{display:block;margin:auto;vertical-align:middle;width:100%;max-width:400px}
UPDATE
I was able to get the image to scale within by adding width:100% to the image. I still can't get it to vertically align middle though.
To center the image, on the img css add
positon:absolute; top:0; bottom:0; left:0; right:0;
This will absolutely position the image relative to its closest non static element (which in this case is #image)
Here is a fiddle: http://jsfiddle.net/dzgvh453/
You have this options
Background image instead of actual image
Simply have a thumbnail that at-least have a min-height and width. then use the image as background, center, and no-repeat.
Scalable image width:
Simply have a thumbnail that at-least have a min-height and width, then put your inside it with 100% width.
Your second option is the easiest way to do it. I simply added width:100% to #image div img
http://jsfiddle.net/3e90xxge/#image div img { width: 100%}
Related
Is there a way, using solely CSS, to set an image's height to its container's height, while maintaining aspect ratio, allowing the width to overflow and be hidden? That sounds like a lot of requirements, but surely there's a way. What I mean is, I want the full height of the image to be displayed, but if the width is wider than the container allows (using bootstraps grid system), then just overflow: hidden. I have the height set to 100% which looks good, but the picture squishes in from the sides to fit inside the container rather than overflowing and being cropped. By setting width to 100%, it's filling the container. I believe it's using the container as the standard for the 100%, rather than the aspect ratio of the photo. So that's what I need to do.
This is what I have going on:
<div style="width:150px; height:150px; display:flex; flex-direction:column">
<img src="http://i.imgur.com/RiX7XfW.jpg" alt="Banana" style="height:100%;width:auto;overflow:hidden">
</div>
TL;DR I need to maintain aspect ration of an image, lock the height to the container height and let the excess of the picture just overflow and be hidden, allowing me to see the maximum amount of the picture possible, while still filling the container.
Bonus points if there's a way to somehow calculate which dimension is smaller and lock that one to the relevant container dimension.
Not so easy to do this if using an image tag, but if using the CSS background-image property (or the shortcut background), then
#wrap{width:300px;height:200px;margin:50px;overflow:hidden;}
#imgDiv{width:1000px;height:1000px;background-image:url(http://placekitten.com/900/900); background-size:cover;}
<div id="wrap">
<div id="imgDiv">
</div>
</div>
Are you suggesting overflow: hidden in the CSS? It's a routine default measure, and you speak around it, like you might be recalling the measure.
Not setting a height, and setting width: 100%, is a nice way to regard the aspect ratio with more concern to the full width. So height: 100% without a specification for width may be a best way to keep full height with aspect ratio intact.
Instead of embedding the image with an img tag, you can set the image as the background image of the container. Then by using a combination of background-size:cover; and background-position:center center; you can cause the image to match the height of the container while keeping the aspect ratio of the original image. The background-position property will center the image so that the left and right sides are cropped off.
Using shorthand, that code would look like this:
<div style="background:url('http://i.imgur.com/RiX7XfW.jpg') center center / cover no-repeat; width:150px; height:150px; display:flex; flex-direction:column"></div>
I would like a div with a background-image that keeps the aspect ratio of the image, with a fixed height of 500px and i want no "padding" on the background of that div.
Is this possible to do?
I Can get a div with a fixed height and a background-image that keeps aspect ratio :
<div style="background: url(something.png) 50% 50% / cover #D6D6D6;background-size: contain;background-repeat: no-repeat;height:500px"></div>
This makes the image centered in the middle of the div ( either vertically or horizontally ) but gives some padding to the background of the div ...
Can anybody help me out ?
What you are trying to achieve is not possible using only CSS, you could use JavaScript to detect the width of the image and then set the width of the div to be the same. Or alternatively you could simply remove the background-image property and rather add the image as an img tag into your HTML. If you do that you can display the div as inline-block which will take care of making the div as wide as the width of the image.
body
{
text-align:center;
}
div
{
background-color:#666;
display:inline-block;
}
div img
{
height:500px;
}
<div>
<img src="http://lorempixel.com/200/500" alt="">
</div>
background-size: contain; will always display the whole image (without cutting off anything), thereby leaving some space either vertically or horizontally.
On the other hand, background-size: cover; will fill the whole DIV in a way that the shorter side of the image corresponds exactly to the length or height of the DIV (depending on the relation of the proportions between DIV and image) and the longer one is cut off on the sides or on top and bottom.
If you don't want a distorted image, those are the options you have.
i have portrait image and i want to fit in DIV tag with same ratio.
example image you can find in below link
http://www.megafileupload.com/4Loy/img.png
If want to maintain the DIV height and width and fit the image into the DIV while maintaining the images ratio then your code is already doing this.
See jsfiddle with added border showing how the image won't go any larger as it has already filled the parent DIV height.
If you want to change it so the DIVs height reacts to the images attributes then remove the DIV height and add the following img rule:
img {width: 100%; height: auto;}
This will fill the parent container width while maintaining the image ratio, and the DIV height will react automatically to fit the image.
Example 2: jsfiddle
I have a situation were I cannot alter the main container and also implement body,html height and margin.
I am wanting to set the image via CSS and I am wanting the DIV to be the full height and width of the image.
What is the best way to achieve this most of the things I have found on google uses a div then a img tag
Use a background image in the div and set width/height to the dimensions of the image.
It's also easy to scale the image using background-size values of cover or contain.
See: http://www.w3schools.com/cssref/css3_pr_background-size.asp
<div style="background-image:url('image.jpg'); width:100px; height:100px;"></div>
Or use the background-size dimensions
<div style="background-image:url('image.jpg'); background-size:100px 100px; width:..; height:..;"></div>
Is there a way to display a set of images horizontally in the center of a div even when the image is wider than the div? For instance, if the outer div is 100px wide and the image is 200px wide then I want the image center (i.e. at 100px) to be aligned with the center of the containing div (i.e. at 50px).
At the moment it works fine when all the images are smaller than the div, but when they are wider, they become left aligned. If they are all the same width, then I can set the scroll position of the div, BUT they are dynamic images and can be any width. Look at the fiddle for an example.
The intention here is to produce something like a document viewer where each image is a page in the document and would therefore be aligned in the middle.
Thanks for any help!
Nest the images inside another div and set its display to inline-block
HTML
<div id="outerdiv">
<div id="innerdiv">
<img src="http://ipsumimage.appspot.com/60x20,ff0000" />
<img src="http://ipsumimage.appspot.com/200x20,ff0000" />
<img src="http://ipsumimage.appspot.com/100x20,ff0000" />
</div>
</div>
CSS
#outerdiv
{
overflow:auto;
width:100px;
background-color:gray;
text-align:center;
}
#innerdiv {
display:inline-block;
}
See this fiddle.
Well Im just starting out with jquery but I can give you a theoretical answer. Use jquery to take width of parent div. take width of image. find the difference in both and move negatively to the amount in the image.
Example: div width is 50
image width is 100
put position relative on the parent div
put position absolute on image
and put 50-100=50/2(actually 25 as the width is distributed to both sides. 25 to the left and 25 5 to the right.) as the left of the image
div parent{
position:relative;
}
div img{
position:absolute;
left:-25; //actually this is the difference of the image and div/2
}
Use jquery to do this dynamically