The image is stretched when I try to make the size smaller.
http://jsfiddle.net/QEpJH/878/
.container img {
display: block;
width: 100%;
height: 60vh;
/*object-fit: cover; // doesn't work in Internet Explorer */
}
You need to make it scalable by 1:1
so use
width: auto; instead of width:100;.
or use height: auto; and width: 100%; in case you want to cover the whole width.
But remember if you cover the whole width, the height will increase.
If you set the width to auto, the image will adjust itself to the given height without any stretch.
.container img {
display: block;
width: auto;
height: 60vh;
}
if you set the image as a background instead and use
background-size:cover
you will lose the stretching but some of the image may get cut off
to counter this slightly you can use
background-position
to position the image in a more desirable place
Try ratio in only percentage or use similar ratio
.container img {
display: block;
width: 30%;
height: 30%;
/*object-fit: cover; // doesn't work in Internet Explorer */
}
Related
I know this must have been asked before but I just cannot find any css to help me. How do I make an image always 100% height and 100% width to match the screen size but always keeping the image's aspect ratio?
.myimage {
object-fit: cover;
width: 100%;
height: 250px;
}
Above almost works but I don't want to hard code height and would like to almost be 100% of the browser's view but keeping the aspect ratio. So the image should always fit 100% height and width wise without any scrolling and maintain that even if the browser is resized. I am using boostrap-5 framework.
.myimage {
object-fit: cover;
width: 100vw;
height: 100vh;
display: block;
}
html, body {
margin: 0;
padding: 0;
}
<img class="myimage" src="//placekitten.com/400" />
I'm trying to create a lightbox where the current image takes up 90% of the height of the page OR a 900px width, whichever one happens first.
Naturally, I used the code below, expecting it to fail. I was right. I tried using the aspect-ratio property (which is frowned on because of its lack of browser support), but nothing worked.
Anybody know how to achieve this?
/* Basically the lightbox container */
.modal {
position: fixed;
width: 100%;
height: 100%;
}
/* Each image has the class mySlides */
.mySlides {
max-width: 900px;
max-height: 90%;
margin: 15px 5%;
}
Alright, a comment from Amaury Hanser got me on the right track. The solution that worked was using object-fit: contain;. This link helped me learn what that is. The property basically makes an object fit within the borders of its parent container while maintaining its aspect ratio.
This is my code now:
.modal {
position: fixed;
width: 100%;
height: 100%;
}
.mySlides {
max-width: 900px;
max-height: 90%;
object-fit: contain;
margin: 15px 5%;
}
I would like, using CSS only, to have an image stretch to the max width of a container div, keeping aspect ratio, without using background images. However, if the height of the image exceeds X then it should be limited by that. The following doesn't cause the image to go 100%. If I set that then it becomes stretched if the height exceeds 200px.
.container {
width: 200px;
position: relative;
}
img {
position: relative;
max-width: 100%;
max-height: 200px;
}
<div class="container"><img src=""></div>
Here's a fiddle to play with: http://jsfiddle.net/cyberwombat/agfy1cfm/4/
Try just setting the height:
img {
position: relative;
max-width: 200px;
max-height: 50px
}
where the values of max-width and max-height match the dimensions of the container.
I suggest to use instead this, more flexible:
img {
max-width: 100%;
max-height: 100%;
height: auto;
}
With this, you can use whatever aspect-ratio image you want, being sure that the images will remain responsive
For what it is worth, I am using foundation:
I have two divs in a single row. I would like to fill the entire right div in its entitreity with an image that maintains its aspect ratio.
That is, rather than distorting the image, I would like to scale the image until the shortest side reaches 100%, while the longer side is hidden beyond the bounds of the container.
I don't have a preference on whether this is done with an img tag or a css background image.
Here is what I have so far, but the image gets distorted as the window is resized:
#demo {
min-height: 100%;
padding: 0;
overflow: hidden;
img {
min-height: 100%;
max-width: 100%;
position: absolute;
left: 0; bottom: 0;
}
}
You could try setting it as a background image in the css and then use : background-size:cover; or.... background-size:contain; depending on your preference/need. But you may need to set the div size at that point. Such as min-width/min-hieght.
try with height:auto and width:px or %
img {
height: auto;
width: 100%;
}
<img src="http://placeimg.com/640/480/any">
Is there a better way of doing this grid using CSS?
html, body {
margin: 0;
width: 100%;
height: 100%;
}
.grid {
overflow: hidden;
}
.box {
width: 25%;
color: #FFF;
position: relative;
float: left;
}
.box .content {
width: 100%;
padding-bottom: 100%;
background-image: url(http://placekitten.com/g/100/100);
background-repeat: no-repeat;
background-size: contain;
}
JSBin
Also is it possible to make it fit within the window's height as well as the width? ...and remove these annoying pixel width gaps that occur as particular dimensions:
If what you want is to fill the body with squares, that is a good way to do it.
If you want to fill all the height also, there are several posibilities; it's unclear what is exactly what you want. But since it seems that you want squares, the only approaches left are
Create more divs
Make the width of your squares higher than 25%
The pixel gaps happen because there are pixel roundings in the size calculus. The best way to solve that is to change background-size to cover (instead of contain)