I have a div on which I defined following CSS rules
<style>
.image-preview {
height: 600px;
width: 50%;
border: 1px solid red;
}
.image {
width: auto;
height: 600px;
}
</style>
<div class="image-preview">
<img src="abc.jpg" class="image">
</div>
Suppose if width:50% is 300px and abc.jpg is of 500px it comes out of the div. I want to keep the image in the div as center aligned and with maintaining the aspect ration of it.
I have given the width:auto but this is not working. I have not much experience with CSS so please ignore if this is too basic to ask.
Thanks!!
You could use display flex to center your image with this you make sure that the images always maintains its aspect ratio...
.image-preview {
height: 600px;
width: 50%;
border: 1px solid red;
display:flex;
align-items:center;
justify-content:center;
}
.image {
max-width:100%;
max-height:100%;
}
<div class="image-preview">
<img src="http://via.placeholder.com/500x150" class="image">
</div>
Try to use flexbox, which is probably the best tool to align items in divs. You can find out more about it here: https://www.w3schools.com/csS/css3_flexbox.asp.
.image-preview {
height: 600px;
width: 600px; /*whatever you want*/
border: 1px solid red;
display: flex;
justify-content: center;
align-items: center;
}
.image {
height: 400px; /*Any value would still keep it vertically centered thanks to the align-items property*/
width: auto;
}
<div class="image-preview">
<img src="https://www.ancestry.com/wiki/images/archive/a/a9/20100708215937%21Example.jpg" class="image">
</div>
The justify-content property handles the horizontal alignment, and the align-items property handles the vertical alignment.
So, image is a inline element:
img {
display: block;
margin: 0 auto; //this is center your image
height: auto; // this will make it ration
max-width: 1200px; //or whatever is the size of your image
}
This will make your image full responsive, centered and ration.
.image-preview {
border: 1px solid red;
box-sizing: border-box;
height: 600px;
padding: 10px;
text-align: center;
width: 50%;
}
.image {
width: auto;
height: 100%;
max-width:100%;
}
<div class="image-preview">
<img src="https://placeimg.com/300/600/any" class="image">
</div>
You can do it by setting height 100%; width:auto to image.
Related
I have an image inside a flexible div and I want the image to stay the same size no matter if the div is being resized, the image should just be hidden (centering it would also be a great add-on). How to achieve this?
Below is my current code, this causes the image to shrink when the div is being resized. Thank you!
.banner-img {
max-width: 30%;
float: left;
overflow: hidden;
border: 1px solid red;
}
.banner-img img {
width: 250px;
height: 100px;
}
<div class="banner-img"><img src="http://via.placeholder.com/250x100" alt="" /></div>
Flex is a good solution to center your image
.banner-img {
max-width: 30%;
height: auto;
overflow: hidden;
display: flex;
justify-content: center;
border: 1px solid red;
}
.banner-img img {
width: 250px;
height: auto;
}
<div class="banner-img"><img src="http://via.placeholder.com/250x100" alt="" /></div>
You can achive this with making an image as background and align the background position to center:
.banner-img {
width: 250px;
max-width: 30%;
height: 100px;
background: url("http://via.placeholder.com/250x100") center no-repeat;
}
<div class="banner-img"></div>
In .banner-img img, you can add object-fit: cover and change the width: 250px from pixels to percentage, like this:
.banner-img {
max-width:30%;
float:left;
overflow:hidden;
}
.banner-img img {
width: 100%;
height: 100px;
object-fit: cover;
}
<div class="banner-img"><img src="http://via.placeholder.com/250x100" alt="" /></div>
I am working on a website and I want to style an image like you style a background with background-position: center. Is there an equivalent to this for a regular image?
Thanks in advance,
Luuk
EDIT:
The image is responsive and contained in a container.
CSS:
.img-container {
max-height: 300px;
overflow: hidden;
}
.img-container img {
max-height: 100%;
max-width: 100%;
}
I would do something like this to position the image centered.
.img-container {
display: flex;
justify-content: center;
align-items: center;
max-height: 300px;
overflow: hidden;
}
.img-container img {
max-height: 100%;
max-width: 100%;
}
You could go for display flex, but the support for IE is quite disastrous. If you care about browser support (which you should) go for the below example instead.
<div class="list">
<div class="item">
<img src="https://unsplash.it/50/40" alt="">
</div>
<div class="item">
<img src="https://unsplash.it/50/60" alt="">
</div>
<div class="item">
<img src="https://unsplash.it/50/30" alt="">
</div>
<div class="item">
<img src="https://unsplash.it/50" alt="">
</div>
</div>
Sass:
.list {
text-align: center;
}
.item {
position: relative;
display: inline-block;
vertical-align: top;
height: 5rem;
width: 5rem;
background: red;
img {
position: relative;
top: 50%;
transform: translateY(-50%);
}
}
Make sure to add the prefixes for the transform attribute as well.
Fiddle: https://jsfiddle.net/k433b6up/
Your desired result isn't exactly clear, but here are some options for two different interpretations:
Changing the display property of the image and setting the text alignment to its container will maintain it's native height and width while centering it in the container:
.img-container {
max-height: 300px;
overflow: hidden;
text-align: center;
}
.img-container img {
display: inline-block;
max-height: 100%;
max-width: 100%;
}
Demo: https://jsfiddle.net/5suo8tbw/
If you're trying to achieve a background fill with an img element you should consider using the object-fit: cover attribute. This will always fill your container's dimensions, maintain the image's aspect ratio, and center it in the container.
.img-container {
max-height: 300px;
overflow: hidden;
}
.img-container img {
object-fit: cover;
height: 100%;
width: 100%;
}
Demo: https://jsfiddle.net/5suo8tbw/1/
Here's a link to the spec: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
For cross browser support, check out the polyfill: https://github.com/anselmh/object-fit
object-fit and object-position properties of an img are equivalent to background-size and background-position properties of a block element with background-image, respectively. In the following snippet, please note that the container size is 300px * 300px while the image size is 500px * 300px.
.imageContainer {
margin: 15px;
width: 300px;
height: 300px;
border: 5px solid lightgreen;
}
.image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
<div class='imageContainer'>
<img class='image'src='https://picsum.photos/500/300' alt='lorem picsum' />
<div>
Im sure this is really easy but i have been looking at this issue for a little while and my brain has gone blank. I have a div that then has an image inside of it. The image seems to just overflow the div border and its driving me mad. I have an image below to show you what is happening along with the css.
#avatar {
float: left;
width: 50%;
height: 300px;
border: 1px solid black;
}
#avatar img {
width: 100%;
height: auto;
}
<div id="avatar">
<img src="http://i.imgur.com/dkzoNCc.png"></div>
I have a border on the main div #avatar just so i can see the whole size of the div. All i want is for the image to scale to the size of the div. If i set the height to 100% it goes into the div just fine but when resizing it it starts to overflow the div. I want the image to resize on the width not height.
Am i missing something really simple here? I dont want to use overflow hidden on the image as that will just cut some of it off i believe.
Thanks everyone
Try below css for img.
use height: 100%; for maximum height
display: block;margin: auto; for centering
max-width: 100%; to fit large images
Please check the example with large and small images.
#avatar {
float: left;
width: 50%;
height: 300px;
border: 1px solid black;
}
#avatar img {
height: 100%;
max-width: 100%;
display: block;
margin: auto;
}
<div id="avatar">
<img src="http://www.baraodasfestas.com.br/Assets/Produtos/SuperZoom/0431_MICKEY_635703672330071491.jpg" alt="">
</div>
<div id="avatar">
<img src="https://upload.wikimedia.org/wikipedia/en/d/d4/Mickey_Mouse.png" alt="">
</div>
Just add:
#avatar img {
max-width: 100%;
}
#avatar {
float: left;
width: 50%;
height: 300px;
border: 1px solid black;
}
#avatar img {
/*width: 100%;*/
height: auto;
max-width: 100%;
height:100%;
}
<div id="avatar">
<img src="http://i.imgur.com/dkzoNCc.png"></div>
It's because of your height:auto for the <img>
Just use :
#avatar img
{
width: 100%;
height: 100%;
}
But this will stretch you image. So if you want full size image inside your container you need to stretch your container instead. Like
#avatar
{
float: left;
display: inline-block;
width: 50%;
height: auto;
border: 1px solid black;
}
#avatar img
{
width: 100%;
height: 100%;
}
I have a 240*240px image inside a 100*300px div (demo values, actual values vary and are unknown). I use object-fit: contain to make the image completely visible inside the div and also keep it's aspect ratio. The problem is that object-fit isn't modifying the width of the image, resulting in a weird "padding" (so to say).
How can I make the image take only as much width as required, instead of taking the original width?
Demo: http://codepen.io/alexandernst/pen/ONvqzN
.wrapper {
height: 100px;
width: 300px;
border: 1px solid black;
}
.flex {
display: flex;
}
img {
object-fit: contain;
}
<div class="flex wrapper">
<img src="https://unsplash.it/240/240" />
</div>
The object-fit property normally works together with width, height, max-width and max-height. Example:
.wrapper {
height: 100px;
width: 300px;
border: 1px solid black;
}
.flex {
display: flex;
}
img {
object-fit: contain;
height: 100%;
width: auto;
}
<div class="flex wrapper">
<img src="https://unsplash.it/240/240" />
</div>
In fact, it works fine too even without object-fit, see this jsFiddle.
.wrapper {
height: auto;
width: 100%;
border: 1px solid black;
background-image: url(https://unsplash.it/240/240);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.flex {
display: flex;
}
img {
object-fit: contain;
}
<div class="flex wrapper">
<img src="https://unsplash.it/240/240" />
</div>
I am trying to get an image horizontally and vertically centered within a div of variable height and width.
So far, so good.(See jsfiddle links below)
Now the catch is the image should also be responsive and adjust if either the height and/or width of the container is smaller than the images height or width.
After researching, going through all the different "solutions" out there and fiddling for a solution, I was unable to find the perfect one, however two came close:
1.) This first one does everything I need except when the window width is smaller than the image width, the image is no longer horizontally aligned:
http://jsfiddle.net/me2loveit2/ejbLp/8/
HTML
<div class="overlay">
<div class="helper"></div>
<img src="http://dummyimage.com/550x480/000/fff?text=H/V Centered and height/width variable">
</div>
CSS
.helper {
height:50%;
width:100%;
margin-bottom:-240px;
min-height: 240px;
}
.overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.5);
}
img {
margin: 0 auto;
max-width: 100%;
max-height: 100%;
display: block;
}
2.) This second example keeps everything aligned, but the image does not scale down when the height is less than the image height:
http://jsfiddle.net/me2loveit2/ejbLp/9/
HTML
<div id="outer">
<div id="container">
<img src="http://dummyimage.com/550x480/000/fff?text=H/V Centered and height/width variable">
</div>
</div>
CSS
#outer {
height:100%;
width:100%;
display:table;
position:fixed;
top:0px;
left:0px;
background-color: rgba(0, 0, 0, 0.5);
}
#container {
vertical-align:middle;
display:table-cell;
max-width: 100%;
max-height: 100%;
}
img {
margin: 0 auto;
max-width: 100%;
max-height: 100%;
display:block;
}
I have attempted this in the past and the only non-JS solution I've come up with (which is frowned upon, by the way) is this:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
display: table;
}
.container {
display: table-cell;
vertical-align: middle;
border: 1px solid #f00;
}
.container > div {
width: 100%;
height: 100%;
margin: 0 auto;
border: 1px solid #00f;
max-width: 550px;
max-height: 480px;
background: url("http://dummyimage.com/550x480/000/fff?text=H/V Centered and height/width variable") 50% 50% no-repeat;
background-size: contain;
}
<div class="container"><div></div></div>
http://jsfiddle.net/pYzBf/1/
Set the background color of the div to black to see the scaling without the image edges. I used those dimensions so you can test it by resizing the frame.