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.
Related
When I place a background image in my div to create a background for it a scrollbar horizontally for the whole webpage. I think it is because my background-size: cover; made the background image grow to its original size but I want the image to scale down exactly to fit all devices.
Codepen: https://codepen.io/Javscript/pen/WNXmRMp?editors=1100
The scrollbar has nothing to do with the background image, not even with the element which has the background image. (Btw., a background image can never affect box sizing.)
The .main-con element has a width of 100% and a margin of 160px. The 100% does not refer to the remaining space; it refers to the width of the parent element, in this case the body.
So the .main-con element is as big as the body/screen, but has a 160px distance from the left side, resulting in it overflowing 160px on the right side.
One way to counteract this without completly reimplementing your website would be to set the width of the .main-con element to calc(100% - 160px).
Try to use this property:
background-size: contain;
background-repeat: no-repeat;;
The difference between the values cover and contain is that:
1- cover: makes the background covers the whole div
2- size: makes the background fits inside the div
You gave your background Image a size of 100%. But you have allso ur Sidebar. So the Image itself cant take all 100% of the screen. Try using
calc(100% - 160px)
for the with of the .main-con
I'm trying to fill a whole div with an image, regardless of the size of the image, but for some reason the image is only as big as it's default size. It does not automatically stretch to fit the size of the div. I tried setting the width and height of the image to 100%, thinking that it'll fit the div that way, but the image still stayed in its default size. Is there a way to automatically stretch an image to fill a div, without testing and changing each image by hand?
<style>
div {
border: 1px solid red;
width: 1000px;
height: 1000px;
background-image: url("side.jpg");
background-repeat: no-repeat;
}
img {
width: 100%;
height: 100%;
}
</style>
<div> </div>
From your question, it is unclear whether you are trying to use a background image or an img element to fill the div.
If you want to fill the div using an img element, the code you've posted will already do that for you. You just need to place an img element within the div, such as:
<div><img src="http://placehold.it/250x250" /></div>
If you want to stretch the image to fill the div using it as a background image, you simply need to add the value cover to the background-size property:
background-size:cover;
JSFiddle for img element
JSFiddle for background image
The <img> tag is an html element that has nothing to do with the background image of that <div>.
As APAD1 correctly points out, the proper way to force a background image to fill an html element is to use background-size.
background-size: contain fills the element until the background image touches the first edge of its container (maintaining the aspect ratio).
background-size: cover fills the element entirely while maintaining the aspect ratio of the image.
background-size: 100% 100% fills the element entirely so that the background image touches the edge of the element on all sides (thus potentially distorting the image).
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%}
I was searching for solution for hours but can't find it.
I have div with fixed height and 50% width. And I want to display a picture inside it with 100% width and default aspect ratio but vertically centered
Thanks ;)
<div class="wrap">
<img class="img">
</div>
Add overflow:hidden to your div and then adjust the margin of the image into the negative. How much depends on the div's fixed height and the image height.
EDIT
Consider using CSS and background images if you don't know the image heights. Instead of outputting an image tag, output an inline style on the div.
<div class="css-is-good" style="background-image: url(image.jpg);"></div>
CSS
div.css-is-good {
background-position: 50% 50%;
/* if you need to stretch it, use background-size: */
background-size: 100% auto;
}
Updated fiddle: http://jsfiddle.net/willthemoor/Cu3G5/
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