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" >
Related
I have a div that is 1140px wide and am image sitting within it that I need to fit the screen size, Is it possible to make the image width size larger than the div width that it is sitting in?
<div className="row" style="width: 1140px; margin-left: auto; margin-right: auto">
<img className="aimg" src="~/images/background.gif" style="height: 325px" />
</div>
CSS as follows:
.aimg {
padding: 0;
display: block;
margin: 0 auto;
height: auto;
width: 100%;
}
As it stands, the div width is limiting the image from fitting the screen width
set position: absolute; width: 100vw; height: 100vh; to you img styles and it should work :)
"vw" stands for viewWidth and "vh", accordingly, for viewHeight.
https://www.w3schools.com/cssref/css_units.asp
Below codepen is based on:
https://css-tricks.com/full-width-containers-limited-width-parents/
Codepen itself:
https://codepen.io/anon/pen/vzawqv
you need css classes for container and image, the following example suppose to the div width is fixed width and set with 480px.
.div_image {
max-height:480px;
height: 480px;
}
.div_image img{
height: 100%;
width: 100%;
}
I am trying to place a <div> in a specific position on top of an image.
The image width is set to 100% to always fit the screen.
My problem is that the <div> position is not relative to the screen as the image.
In this example, I am trying to place the div attached to the gray line (even if the screen resolution changed).
https://codepen.io/eyalankri/pen/GdGvGO
Is it possible?
Try out this codepen.
You need to give percentage width to your give, and make left position also in percentage unit, so it changes accordingly screen size.
html, body {
margin: 0;
padding: 0;
height: 100%;
background-color: black
}
.slider-container {
z-index: 0;
min-width:1024px;
position: relative;
}
.slide-image {
width: 100%;
min-width:1024px
}
.form-container {
z-index: 999;
position: absolute;
top: 0;
height: 300px;
width:11%;
background-color: white;
text-align:center;
left: 27.5%;
}
<div class="slider-container">
<div class="form-container">
<br/>
my div
</div>
<img class="slide-image" src="http://ecocar.co.il/test1.jpg" />
</div>
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 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.
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.