I've tried everything I can find.
I'm trying to keep an image from overflowing outside the div that it is inside.
I've tried:
div.row #whoPic {
object-fit: contain;
max-width: 100%;
max-height: 100%;
overflow: hidden;
max-width: auto;
max-height: auto;
max-width: 300px;
max-height: 300px;
}
...and many variations of each of those values.
I've also tried targeting all img's, as well as targeting very precisely.
Please help me out. Going nuts here.
In fact this question has been asked before.
Here: How do I auto-resize an image to fit a div container
Here: Make an image width 100% of parent div, but not bigger than its own width
Here: Contain an image within a div?
Here: How do I fit an image (img) inside a div and keep the aspect ratio?
Restrict the image with max-width and max-height both set to 100%.
.theContainer {
width: 300px;
height: 100px;
background-color: lightblue;
}
.theContainer img {
max-width: 100%;
max-height: 100%;
}
<div class="theContainer">
<img src="https://placehold.it/200x200">
</div>
<h3> The original image size is 200x200 </h3>
<img src="https://placehold.it/200x200">
Related
I want to fill a parent div with a img, but instead of setting the image as a background property of the div, I want it to be a individual img element inside of the div.
In other words, I want to do this:
div {
background-image: url('someimg.jpg');
background-size: cover;
background-repeat: no-repeat;
}
..but with a img element, like this:
<div>
<!-- Image element should cover the container on dekstops and small screens as well -->
<img src="someimg.jpg">
</div>
I managed to do something like this on the img:
img {
width: 100%;
max-height: 100%;
object-fit: fill;
}
..but on resize, it doesn't fill the parent. Here's a fiddle: https://jsfiddle.net/dy5ub0f5/5/
The img may be filling the parent, but the parent may not be the size you expect.
Change the img styling from max-height: 100% to height: 100%
Adjust the size of the parent div.
Since, you give max-height:100%; in CSS, if your image resolution is less than the div (400Px) then it will stock on with its original height (375px). That's why the image is not filling the parent div on resizing.
div {
height: 400px;
width: 100%;
background-color:#ececec;
}
img {
width: 100%;
height: 100%;
object-fit:fill;
}
<div class="image">
<img src="https://png.pngtree.com/thumb_back/fw800/back_pic/00/06/31/695628f664c006c.jpg">
</div>
The Above Code Will Make the image to fill in its Parent DIV. But Since the picture resolution is less than the div, the image will blur.
To avoid you can use max-width and max-height, so that if the image have less resolution than the div, it will stick with its own size, otherwise it will fill the parent div like the following:
div {
height: 400px;
width: 100%;
background-color:#ececec;
}
img {
max-width: 100%;
max-height: 100%;
object-fit:fill;
}
<div class="image">
<img src="https://png.pngtree.com/thumb_back/fw800/back_pic/00/06/31/695628f664c006c.jpg">
</div>
I want to show an image with rounded corners. So the image must stretch to the container but doesn't crop any part, like object-fit: contain. However, border-radius applies to image element, not the picture content. Here is an example (also JSFiddle):
body {
width: 100vw;
height: 100vh;
margin: 0;
}
div {
width: 100%;
height: 100%;
}
img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 20%;
}
<div>
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg">
</div>
You can check how it works when you resize the viewport.
So, is there a way to make the image element resize it's borders in both directions to adjust to the container, just like object-fit does?
Or maybe a way to apply a "crop-by-rounded-rect filter" on the image content?
I've also had this problem and I've found a way to do it. If you set the height and width to auto the img element maintains its aspect ratio and the image touches the borders. You can then use max-width and max-height instead of width and height.
img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 20%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
You may also have to center the img on the parent div as now if it's smaller than the maximum size it will move to the top left.
After some research it seems like this is not possible in pure CSS. The answer here also confirms that.
In the other answer of this question the image view is not growing to "touch" the parent container thus leaving empty area around it in all 4 directions and staying small somewhere centered in the container. Which means it doesn't behave the same way, as the code in the question with img element taking the whole parent area and then picture content "stretched" to touch the closest borders with object-fit: contain.
Here is a solution that will fit the image when the container is smaller:
div {
display: flex;
align-items: center;
justify-content: center;
}
img {
border-radius: 16px;
max-width: 100%;
max-height: 100%;
}
If the container is bigger than the image it will just center it. Note that you probably don't wanna stretch the image at this point or it will look bad
I have made a code to resize and set the width of an image to that of the browser dynamically, so I have set the following code in css
max-width: 100%;
height: auto;
My challenge is that the image never resizes dynamically to occupy the entire screen width of the browser dynamically.
Here is a Plnker I have made
http://plnkr.co/edit/j6JBCaKBmVQV1PDAh3dZ?p=preview
What could be wrong.
Change max-width to width.
As should be obvious from the naming, max-width only acts as an upper limit. It does not make anything bigger, it merely downsizes things if they already are bigger than what you specify there.
Sample: http://jsfiddle.net/b18axhzg/
HTML:
<img src="http://lorempixel.com/400/200/" alt="">
CSS:
img {
width: 100%;
height: auto;
}
To squeze it if the parent becomes too small:
display: block;
max-width: 100%;
height: auto;
To force it taking up the whole with:
display: block;
width: 100%;
height: auto;
Use the property for img.
CSS:
img {
width: 100%;
height: auto;
}
or max-width:100%;
it will automatic become resizeable.
change max-width: 100%; to width :100%
I have the following piece of code:
.goplots {
height: auto;
width: auto;
max-height: 50px;
float: left;
}
and this HTML code mixted with a MediaWiki image:
<div class="goplots">
[[File:{{PAGENAME}}-CC.png|Cellular components]]
</div>
The problem is that the image is resized only when modifying the width value. It does not apply the height or max-height. I tried everything without success. What is going on?
Add this
.goplots img {
max-height: 100%;
}
You need to apply max-height to the contained img as well, this will make it shrink in height if necessary while keeping its proportions to fit in its container .goplots.
I'm trying to scale images to the height of their parent which has a percentage height of its parent. This works as expected except in Chrome where the image won't scale its width proportionally once the height is reduced below the size at which it was first rendered. Any ideas on how to fix this?
<div>
<img src="http://placehold.it/100x100" alt="">
</div>
and the css:
html, body {
height: 100%;
margin: 0;
}
div {
height: 70%;
background-color: red;
}
img {
height: 100%;
width: auto;
}
JSFiddle
Removing the width property fixes this:
img {
height: 100%;
}
I'm not sure why this happens, but I'm guessing that making the width always at auto would fallback to the original width when the image is scaled down (this doesn't happen in most cases I've tried, but a certain combination might trigger it to happen that way). Not sure if it's by design or not, but I'll go ahead and try to report this somewhere.
Fiddle
Try using display: block; to make Chrome scale the image below the rendering-size:
display: block;
min-height: 100%;
height: 100%;
width: auto;