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.
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" >
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%;
}
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.
My site has a 900px div #content that is centered with margin-left: auto and margin-right: auto. I have an image that I need to display behind the div which will partially overlap #content.
The image is set to display as block at present and I can get it to where it needs to be, but it doesn't allow #content to draw over the image. I can get #content to display over the image with position: absolute however this prevents the use of margin-left / margin-right auto to center.
My current positioning, which gets it where it needs to be is:
img#watermark
{
margin-left: auto;
margin-right: auto;
display: block;
padding-left: 900px;
}
#content just needs to appear over the watermark.
Help greatly appreciated.
html:
<img src="http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" />
<div></div>
css:
div {
margin:auto;
width: 512px;
height: 512px;
background: rgba(0,0,0,.4);
position: relative;
}
img {
position: absolute;
left: 50%;
margin-left:-256px;
}
http://jsfiddle.net/Db2cw/
the solution is to have a surrounding div on the #content div, and that surroinding div positioned absolutely and with a defined width and height.
Ex:
html:
<div id="outter">
<div id="image"><img src="something.jpg" /></div>
<div id="contentOutter">
<div id="content">the content here</div>
</div>
</div>
CSS:
#outter {
width: 1000px;
height: 300px;
position: relative;
}
#image {
width: 1000px;
height: 300px;
position: absolute;
}
#contentOutter {
width: 1000px;
height: 300px;
position: absolute;
}
#content {
margin: 0 auto;
width: 900px;
}
Example here: http://jsfiddle.net/qwEhv/
"I can get #content to display over the image with position: absolute however this prevents the use of margin-left / margin-right auto to center."
What you might need to do here is to have an additional div - call it #contentWrapper for example and center it using margin-left and right, set position to relative. Put div #content inside the wrapper div and position absolute. This should allow you to make #content look centered.