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>
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'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%}
Does background-image not work with percentage div sizes? The images only show up if I hardcode width and height in the .contrast class. Images don't show up if width and height are percentages. Any insight?
CSS:
.parent{
width=1000px;
}
img.contrast{
width:400px;
height:100px;
background-image: url(http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg);
}
HTML:
<div class="parent">
<img class="contrast"/>
<img class="contrast"/>
<img class="contrast"/>
</div>
JsFiddle
Edit1: So .contrast cannot inherit the size of the parent division? If I had 3 divisions within a parent division set to 25% width, it can't access the parent's width?
Unless you use it as SRC, the container has no way to know wich size is your background.
That been said, you can just use divs for that purpose, and play with the background-size, background-position properties to get the desired effect (i.e. make the background fit the div size). What you cannot do is to make the div "inherit" the size from its background property.
Take a look at this fiddle I made from yours: http://jsfiddle.net/amenadiel/x9a56/2/
img.contrast{
width:450px;
height:100px;
background-image: url(http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg);
}
img.contrast2{
width:50%;
height:100px;
background-image: url(http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg);
}
img.contrast3{
width:20em;
height:100px;
background-image: url(http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg);
}
You can have the divs (or imgs) take absolute widths, or widths relative to the parent, or widths relative to the window. That''s not a problem, because the container has a width from which you can relate. But it wou fail to provide a height for each one, they won't have any.
In turn, the container div expands to fit the total height of its children elements. But, as an alternative workaround, If you provide a fixed height for the container, then you can assign relative heights to the children img.
TL/DR
use img with src attribute to guess size from the image url, or pick your favorite workaround
I have a header, and the width is set to 100% because I want that the image adjust to the size of the browser. However, I want to adjust the height of the conteiner to the height of the image to see the image completly.
I am using this code in my css file:
background-image: url('http://...');
background-size:100% auto;
background-repeat:no-repeat;
I use the size auto in the height to respect the ratio of the image.
I know that normally the content is adjust to the size of the container, but in the case of the height, I would like to adjust the height of the container according to the element that contains. Is it possible?
Thanks so much.
Disclaimer: This meta post
Just add an image element in your div - and the div will by default take the height of the img
FIDDLE
<div>
<img src="http://placehold.it/350x150" alt="" />
</div>
I want to resize images when the browser is resized but I would like to keep a border of 30px on both the left and bottom of the image when doing so. Like this: http://www.jennyvansommers.com/non-commissioned/corner/#347
Is there a simple way to do this using CSS?
Thanks in advance
I would try putting the image inside of a container, the container having 100% width and height, with padding on the left and bottom of 30px, and the image inside it also having 100% width and height.
EG
<div id="imageWrapper">
<img src="imageurl" />
</div>
<style>
#imageWrapper{width:100%;height:100%;padding:0 0 30px 30px}
#imageWrapper img{width:100%;height:100%;}
</style>
The wrapper should fill the window, and the image should fill the wrapper out to the padding. This will most likely stretch your images though if the shape of the image differs to the shape of the window. If you want to keep the aspect ratio of the image try just setting the width or the height of the img, but not both.
Hope this helps :)
EDIT:
Not sure if you want to fill the screen, play with img{max-width:100% and img{max-height:100% instead of width and height if you want the image to retain it's natural size unless the window is smaller than it..
I would expect setting a min-width and min-height of 30px, with a relative width and hiehgt of 50% or whatever relative size you would like would achieve this sort of effect
.image-resize {
min-hieght:30px;
min-width:30px;
height:50%;
width:50%;
}
Sorry misread your question there, a border? or a margin? so somthing like
margin-left:30px;
margin-bottom:30px;
instead of the height and width, you could use border-left and border-bottom i suppose using a transparent border, but i perfer margin.
But relative sizing i think is what you want? so it resizes with the browser, or actually resizes relative to its parent so depends where it exists in the dom