I have a div which contains an image
<div class="logo-wrapper">
<img src="img/logo.jpg">
</div>
and following CSS:
.logo-wrapper {
width: 197px;
height: 78px;
position: relative;
}
img {
bottom: 0;
display: block;
height: 100%; /* this */
width: 100%; /* or this, depending on image ratio */
margin: auto;
position: absolute;
top: 0
}
The image inside .logo-wrapper is generated dynamically and each has a different ratio. What I intend to do, is to fill the img whether in the height or width of its parent depending on the dimensions of the image. I could do that with an background image instead, but I don't want to have trouble with old IE's. So does anyone have a solution that the img takes whether height or width, depending on its ratio?
If the image is bigger than .logo-wrapper, you can use
img {
max-height: 100%;
max-width: 100%;
}
If not, it won't grow, but this way you won't have a blurred image.
Related
I am trying to keep image aspect ration correct when either width > height OR height > width. I am having issue doing this when the width exceeds height, the image will overflow into the parent container. I dont want this to happen, instead readjust the image size to still keep the correct aspect ratio.
This example has an image of 640 x 480, with the ratio of 4:3
If i drag the container width smaller than the height i need even padding top/bottom without image overflow. If i drag the container wider than the height then i need even padding left/right without image overflow.
.main {
height: 100%;
width: 100%;
}
.wrapper {
position: relative;
padding-bottom: 75%;
}
.wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="main">
<div class="wrapper">
<img src="https://placeimg.com/640/480/animals" />
</div>
</div>
JSFiddle
For modern browsers, you should only set the width. The browser will do everything else.
Example:
.main {
height: auto;
width: auto;
}
.wrapper {
position: relative;
padding-bottom: 75%;
}
.wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
You can set height:auto and width:100% to make your image responsive
.my-img {
width: 100%;
height: auto;
}
<img src="https://placeimg.com/640/480/animals" alt="Nature" class="my-img" >
Hi I have a fluid container that is based on screen height and width in my website. I would like to have an image fill the container at all times as it expands in any direction based on screen size. The images used will vary in size and aspect ratio.
I have made an attempt with html and css below:
div {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
height: 80vh;
width: 80%;
background-color: red;
position: relative;
overflow: hidden;
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
/* max-width: 100%; // If used Image needs to be tall enough to fill div */
/* max-height: 100%; // If used Image needs to be wide enough to fill div */
}
<div>
<img src="http://i.imgur.com/kOY2G57.jpg">
</div>
Without max-height and max-width, this works well if the img is smaller than the container but does not work if the images come out larger as they come out in their natural size and get cropped.
jsfiddle example
Is it possible to accomplish this task with just pure css?
Update
I also would like to avoid using background images as a solution and see if this is possible with just the img tag in place at the dom so as to avoid programing the img tags if possible.
Instead of using the <img> tag you can just give the <div> a background image with background-size: cover property. The background image will maintain the aspect ratio while covering the entire div container at all times.
<div></div>
div {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
height: 80vh;
width: 80%;
background: red url("http://i.imgur.com/kOY2G57.jpg") center center;
background-size: cover;
position: relative;
overflow: hidden;
}
Use object-fit for images to achieve the same result akin to background-size cover, contain:
.imgFit {
object-fit: cover; /* cover, contain */
display: block;
width: 100%;
height: 100%;
}
Use like:
<img class="imgFit" src="" alt="">
In my project, there are some images. My code looks like:
<div className="col-sm-6">
<img src="xxx">
</div>
<div className="col-sm-6">
<img src="xxx">
</div>
The width of img is 100% of div, which is 50% of the whole screen. If I resize the browser, the width of image is changed. In this case, how to keep the height is still the same as width?
It depends on the aspect ratio of the image.
If you want to stretch the image to a square: since the container <div> is 50% of the whole screen. You could've written it as width: 50vw; (50% of the viewport width). The same for your image: width: 50vw; and to keep height the same as the width.:
.col-sm-6 img {
width: 50vw;
height: 50vw;
}
If the image is a square, just adjust width. Height will automatically adapt. Since you must be using Bootstrap (guessing from the class name col-sm-6).
If the image is always panoramic:
.container {
width: 50vw;
height: 50vw;
border: 1px solid lime;
overflow: hidden;
}
.container img {
height: 100%;
min-width: 100%;
}
<div class="container">
<img src="http://www.w3schools.com/css/img_lights.jpg">
</div>
Same logic above for always vertical images.
You can just set the width of the wrapper to equal width and height for this and 100% width and height for the img.
Another Option
You can also use the fact that padding is always calculated based on the width in CSS-
Position the img absolutely relative to its wrapper
Give the same value for padding-top and width (50vw each) and set height to zero for the wrapper.
Give width: 100% for the img
See demo below:
body {
margin: 0;
}
.wrapper {
width: 50vw;
height:0;
padding-top: 50vw;
position: relative;
}
.wrapper img {
width:100%;
height: 100%;
top:0;
left: 0;
position: absolute;
vertical-align:top;
}
<div class="wrapper">
<img src="http://placehold.it/250x250">
</div>
Note that your images may stretch out if it is not a square image - you can opt according to your design to drop either of width: 100% or height: 100% so that the stretching won't happen. (or opt to use a square image of course!)
See demo below:
body {
margin: 0;
}
.wrapper {
width: 50vw;
height:0;
padding-top: 50vw;
position: relative;
}
.wrapper img {
width:100%;
height: 100%;
top:0;
left: 0;
position: absolute;
vertical-align: top;
}
<div class="wrapper">
<img src="http://placehold.it/250x100">
</div>
Usually if the width auto then height fix hardware and vice versa, if you want auto height to auto-height of the current div
I am aware of the image resizing technic of changing image proportions based on width:
img{
max-width: 100%;
height: auto;
}
I need to do the same thing only based on the height of the parent, not the width. I have tried the following with no effect:
img{
width: auto;
max-height: 100%;
}
I hope I explaining this well enough.
Please help :)
max-height will only restrict the height to be less than the given value.
If you want it to be the same as its parent.. give it as height: 100%
hence this should work:
CSS:
img{
height: 100%; // changed max-height to height here
width: auto; // this is optional
}
You cannot effectively base it on the height using standard css techniques, but you can make the height relate directly to the width of the image for a more flexible layout. Try this:
img {
position: relative;
width: 50%; /* desired width */
}
img:before{
content: "";
display: block;
padding-top: 100%; /* initial ratio of 1:1*/
}
i have tried this and it worked .
<div class="parent">
<img src="http://searchengineland.com/figz/wp-content/seloads/2014/07/google-logo-sign-1920-600x337.jpg" alt="..." />
</div>
.parent {
width: 100%;
height: 180px;
overflow: hidden;
}
see it here
https://jsfiddle.net/shuhad/vaduvrno/
I have image thumbnails floated to the left. The code is as follows:
<div id="imgContainer">
<div>
<img src="image.png" />
</div>
</div>
And here is the css:
#imgContainer div {
width: 23%;
float: left;
padding: 1%;
position: relative;
}
#imgContainer img {
position: absolute;
top: 0;
left: 0;
width: 100%;
max-width: 290px;
}
And the problem is:
It stretches the images to 290px only by width. It doesn't seem to affect the height. which results in really stretched thumbnails. I need them to be 290px max width and the height should scale accordingly.
Any dimension that isn't specified should scale automatically, but your images may be inheriting styles that dictates other wise. To revert to automatic scaling height, you should specify the following property for #imgContainer img:
height: auto;
Add:
#imgContainer img { height: 100% }
or
#imgContainer img { height: auto }
should be enough.