I have a div that contains an image. I want the image to resize with the div, but I do not want the image to ever have a height greater than 480px. I will post what I have below. It resizes with the div correctly, but it does not obey the max-height. If I move the mx height to the img css it does, but it will not resize then. I'm sure its something simple, but I can't seem to get it.
.feature_image {
max-height:480px
}
.feature_image img{
height: 100%;
width: 100%;
}
And here is the HTML
<div class="feature_image">
<img src="img/main-featured-image.png"/>
</div>
Have you tried putting a display:block?
Full CSS would look like:
.feature_image img {height: 100%; width: 100%; display:block;}
The reason behind your issue is that you did not specify the width of the container but, in the same time, you set a width: 100%; for the image.
I tested this with and it works just fine:
.feature_image {
height: 480px;
width: 480px;
}
.feature_image img{
height: 100%;
width: 100%;
}
This solution is good for small images, however it causes large images to distort, but there are solutions to overcome it.
You need to specify not only max-height; but also height in order to use height 100% for the image! :) CSS has no idea what 100% of to inherit. I hope you get it.
.feature_image {
max-height:480px;
height: 480px;
}
.feature_image img{
height: 100%;
width: 100%;
}
You need width:auto;
.feature_image img{
max-height:480px;
width: auto;
}
http://jsfiddle.net/8qLeE/51/
Related
I have done this many times before but it doesn't seem to work now for whatever reason. I want the image to be the full the width of the container but it doesn't. Any ideas?
jsFiddle: http://jsfiddle.net/Lqffk1ak/
Code:
img {
max-width: 100%;
max-height: 100%;
}
div {
background: #ccc;
}
<div>
<img src="https://s11.postimg.org/dpgqru2pv/Police2_600x250.jpg" class="full-width">
</div>
Just add width:100% to img
img {
width:100%
}
Looking at your class, what you should add is some CSS on the full-width class to make the img width 100%.
This way, only the images set as "full-width" will be forced 100%. The other one will keep the max-width rule of 100%, but won't be resized if they are smaller.
img {
max-width: 100%;
max-height: 100%;
}
.full-width {
width: 100%;
}
div {
background: #ccc;
}
<div>
<img src="https://s11.postimg.org/dpgqru2pv/Police2_600x250.jpg" class="full-width">
</div>
Just make your image width 100%. Even you resize your container image will fit on it.
img{
width:100%;
}
You can check the updated fiddle here
Change the css :
div {
height: 100%;
}
img {
width: 100%;
min-height: 100%;
}
I know this isn't directly an answer to your question but generally speaking, upscaled images look quite nasty. A way people get past this is to have the image centered and then add a blurred version behind it.
Like this:
body {
margin: 0;
}
.image {
position: relative;
text-align: center;
overflow: hidden;
font-size: 0px;
}
.background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://s11.postimg.org/dpgqru2pv/Police2_600x250.jpg');
background-size: cover;
z-index: -1;
}
.blur {
filter: blur(10px);
}
<div class="image">
<div class="background-image blur"></div>
<img src="https://s11.postimg.org/dpgqru2pv/Police2_600x250.jpg" class="full-width">
</div>
I hope you find this helpful.
Because your Image is has 600px; height, and the you have set max-width:100%. So max-width property will only work when the parent dive will be smaller then 600px;.
To make image to the containing div, you have to give set image's property 100%; that is .full-width {width: 100%;}
I'd like to fill a div with an img, keeping aspect ratio and stretching either width or height as much as required to fit in.
<div style="width: 80px; height: 80px">
<img src="..." />
</div>
How could I achieve it? If the image is not quadratic, it must be "zoomed in" and either be scropped top-bottom or left-right, depending which side is the bigger one. Moreover the image should afterwards be centered, so that the corners get cut equally.
I tried (but no effect):
.thumb {
max-width:100%;
max-height:100%;
}
If I add additional width: 100%; height:100%;, the images fit perfectly, but are resized not keeping aspect ratio.
the following did the trick:
width:100%;
height:100%;
object-fit: cover;
overflow: hidden;
Using max-width, the image will be contained inside the div, there will be no overflow.
If you use min-width instead, the shorter side will be exactly 100% of the div while the other side can be longer.
To center the image, we can use translate and relative positioning.
The following code works.
div {
overflow: hidden;
}
.thumb {
min-width: 100%;
min-height: 100%;
transform: translate(-50%, -50%);
position: relative;
left: 50%;
top: 50%;
}
To keep an image's aspect ratio, just specify one dimension:
div {
width: 80px;
height: 80px;
border: 2px solid red;
overflow: hidden;
}
img {
height: 100%;
}
This will produce the following effect:
However, as you can see, the kitten is not central, but you can use Flex box to sort this out.
div {
width: 80px;
height: 80px;
border: 2px solid red;
justify-content: center;
display: flex;
flex-direction: row;
}
img {
flex: 1;
height: 100%;
}
.thumb {
max-width:100%;
height:auto;
}
Or ( to allow scale up and down, which will look pixelated if you scale up, where the above will only scale to the max size of the image )
.thumb {
width:100%;
height:auto;
}
Is what you are looking for.
More info on responsive images:
http://demosthenes.info/blog/586/CSS-Fluid-Image-Techniques-for-Responsive-Site-Design
http://www.w3schools.com/css/css_rwd_images.asp
Not sure if anyone still looking at this post. I came across this while I was looking for a way to fit a image into a < div > without getting the unwanted white space around the image, because I was using hover & stick-out effect.
I was inspired by Matt's solution.
Instead of
.thumb {
max-width:100%;
height:auto;}
I added
.thumb {
max-width:100%;
max-height:100%;
height:auto;}
Now my images fit in to the < div > perfectly without having those white space stick out with the image.
use background-size:cover
div{
background-image:url(http://placekitten.com.s3.amazonaws.com/homepage-samples/200/140.jpg);
background-size:cover;
}
<div style="width:80px;height:80px;"></div>
the issue is easy to explain...
I have a container div with a 90% height and a contained image with height:100% to fill its container.
Here is the simple css:
.carousel-item .img {
height: 90%;
text-align: center;
}
.carousel-item .img img {
height: 100%;
max-height: 384px;
max-width: 497px;
}
The problem is that just Chrome randomly (but it happens the most of the time) stretches the width image like I set width property to 100% but I didn't because I want to keep its aspect ratio.
I was wondering if it's a Chrome bug, or there is a workaround for that.
I link two screenshots:
http://oi61.tinypic.com/ehxlbm.jpg <--- as is.
http://oi62.tinypic.com/2qcl8gl.jpg <--- to be.
Thanks for helping.
.carousel-item .img img {
height: 100%;
width: auto;
max-height: 100%;
max-width: 497px;
}
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 want my images to resize as the window height changes while keeping the containing div shrink wrapping the image. I tried using:
<div>
<img src="http://akamaicovers.oreilly.com/images/9780596806767/cat.gif" alt="">
</div>
html, body {
height: 100%;
width: 100%;
}
div {
height: 90%;
background-color: black;
display: inline-block;
}
img {
height: 100%;
width: auto;
}
But it doesn't seem to work as expected. The div doesn't shrink. It actually does once I play around with the css properties in debugger.
Here is the fiddle (try resizing the result panel)
Update:
Now this is strange. Since I first posted this question the browser behaviour changed. Originally (Chrome) when I resized the window the image would shrink proportionally as expected but the wrapping div would keep its original width. What happens now (Chrome update?) is that the image doesn't shrink horizontally, and the div also.
I tried it with the latest Safari and Firefox. Both shrink the image but keep original div width. So please be kind to check your solutions on other browsers as well.
Update #2:
The div has to stay of block type as I need to place other elements in the corners of the image.
I guess you'll have to resort to JavaScript:
$(window).on('resize', function (){
$('div').width($('img').width());
});
JSFIDDLE
You just have to keep your image max-height to be 100%. Thats it.
Here is the Working Solution
The HTML:
<div>
<img src="http://akamaicovers.oreilly.com/images/9780596806767/cat.gif" alt="">
</div>
The CSS:
html, body {
height: 100%;
width: 100%;
}
div {
height: 90%;
background-color: black;
display: inline;
}
img {
max-height: 100%;
max-width: 100%;
height: 100%;
}
EDIT
Updated CSS for the img class to make the image fit the full div.
Here is the working solution for the edit.
img {
max-height: 100%;
max-width: 100%;
height: 100%;
display:block;
}
Hope this Helps.
I have had a bit of a go at your fiddle but I don't think browsers will change the width of a div based on the width of the image inside it changing its width, I have tried a few things but couldn't get it to work.
I can however suggest another approach to placing elements in the corners of your auto re-sizing image. Instead of placing these elements inside a div which is also holding the image, you could just float the image and float some div's with a fixed width to the right and the left of the image, and then make those div's cut into the image by setting some negative margins on them.
Here's an example jsFiddle demonstrating this approach. You'll see that the images stay in the corners of the main image when you resize the result window (and thereby changing the size of the main image).
HTML
<div class="right">
<img src="..." />
<img src="..." />
</div>
<img src="http://akamaicovers.oreilly.com/images/9780596806767/cat.gif" alt="" />
<div class="left">
<img src="..." />
<img src="..." />
</div>
CSS
html, body {
height: 100%;
width: 100%;
}
img {
height: 90%;
float: left;
}
div {
float: left;
width: 40px;
position: relative;
z-index: 1;
height: 90%;
}
div.left {
margin-left: -40px;
}
div.right {
margin-right: -40px;
}
div > img {
padding: 3px;
border: 2px dashed blue;
width: 30px;
height: 30px;
}
div > img:last-child {
bottom: 0px;
right: 0px;
position: absolute;
}
you want to give your image width to 100%. Use this.
img {
height: 100%;
width: 100%;
}
When you provide a width and height for the div in %, it resizes according to the page size. And the image size in % is relative to the div width and height. I have kept the div height at 90% of the available space and width at 50%. The image is at 90% both height and width, so that you can see the re-sizing of both image and div sections.
html, body {
height: 100%;
width: 100%;
}
div {
height: 90%;
background-color: black;
width:50%;
}
img {
height: 90%;
width: 90%;
}
You have to update your css written for image purpose
img {
max-height: 100%;
max-width:100%;
}
If I understood correctly, you want to resize image by height but keep proportional size?
If so, use this:
img {
height: 100%;
display: inline-block;
}
You might want to use display: block; as well, depending on your needs.
FIDDLE: http://jsfiddle.net/zhyv9/38/
I have updated the fiddle, with the Img tag self close that may cause error some times..,
and If the image have specified size height and width then it will also resize, and the corresponding div height increases/decrease as 90% when I zoom-in/zoom-out
I hope this is the answer, as I have understood wrapping and re-sizing,
Please reply if not working..
Adding this little hack worked for me. To my understanding it forces the browser to redraw/reflow its contents. Fiddle. I can't figure out why this isn't done automatically by the browser. Tested on Firefox, Chrome and Safari.
window.onresize = function() {
$(".thumb").each(function() {
this.style.display = "none";
this.offsetWidth;
this.style.display= "inline-block";
})
}