I'm trying to get an image to replace another image but not stretch, where the background size could be cover. In the demo I've build, the real image is one of an elephant, but I've replaced it with one of a lion via CSS only - I'm not allowed to change the HTML to achieve this.
But it's stretched. Adding background-size: cover does nothing. Is there any way of making the lion image not stretched that doesn't change the height of the div or image but instead does it via something like background-size: cover or similar? Thanks for any help here.
div {
width: 300px;
height: 400px;
background: lightgreen;
}
img {
width: 100%;
height: 400px;
content: url(https://c81s22ku6ih1er8af18cv13c-wpengine.netdna-ssl.com/wp-content/uploads/2015/04/Lion.jpg);
}
<div>
<img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQudlp3slhvMcKABuQ3hqSbMiBQVUO7nYlDgw_-oj2dUzQ84SEw' />
</div>
You can use object-fit: cover.
div {
width: 300px;
height: 400px;
background: lightgreen;
}
img {
width: 100%;
height: 400px;
content: url(https://c81s22ku6ih1er8af18cv13c-wpengine.netdna-ssl.com/wp-content/uploads/2015/04/Lion.jpg);
object-fit: cover;
}
<div>
<img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQudlp3slhvMcKABuQ3hqSbMiBQVUO7nYlDgw_-oj2dUzQ84SEw' />
</div>
Have you tried using % instead of px?
And also, I would add a margin: 0; to the body. That would get rid of the white spaces around the image.
div {
width: 100%;
height: 100%;
background: lightgreen;
}
img {
width: 100%;
height: 100%;
content: url(https://c81s22ku6ih1er8af18cv13c-wpengine.netdna-ssl.com/wp-content/uploads/2015/04/Lion.jpg);
}
body {
margin: 0;
}
<div>
<img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQudlp3slhvMcKABuQ3hqSbMiBQVUO7nYlDgw_-oj2dUzQ84SEw' />
</div>
Related
Here is my jsfiddle code.
<div class="gallery-thumbnail">
<a href="google.com">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/13Vend%C3%A9miaire.jpg/1024px-13Vend%C3%A9miaire.jpg" />
</a>
</div>
.gallery-thumbnail {
display: flex;
max-width: 400px;
align-items: center;
justify-content: center;
overflow: hidden;
background: silver;
}
.gallery-thumbnail a { /* This magic makes a square, because the padding % is of the element's width. */
height: 0;
padding-bottom: 100%;
}
.gallery-thumbnail img {
position: relative;
object-fit: cover;
width: 100%;
background-color: green;
}
https://jsfiddle.net/hgw7s9qf/
I spent a while searching around how to make an element square for all screen sizes, and then some more time trying to set a not-perfectly-square image inside that area. I am finding I can't have everything at once.
How can I get that image to fit-fill the square responsively, the way one would expect object-fit: cover to work, yet still maintain the area as a dynamically-resizing square?
Important: I need this to be responsive, so the square shrinks as the window does, and the image inside should too.
I found a way.
I am not really sure why it works, exactly. Maybe one of you brilliant people can help with that.
.gallery-thumbnail {
position: relative;
width: 100%;
padding-bottom: 100%;
}
.gallery-thumbnail img {
position:absolute;
object-fit: cover;
width:100%;
height:100%;
}
https://jsfiddle.net/7f13rnvu/
I'm not entirely sure what your end goal is but with the same markup, I got this to work:
.gallery-thumbnail {
max-width: 400px;
background: red;
}
.gallery-thumbnail img {
display: block;
object-fit: cover;
width: 100%;
height: 400px;
}
After reading this, I think that the image needs both width and height for object-fit to work its magic as it's fitting within the image sizing.
Hope that helps.
To make an image properly square you need to specify same height and width for the image. You can try like this
<div class="square">
<div class="content">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/13Vend%C3%A9miaire.jpg/1024px-13Vend%C3%A9miaire.jpg" alt="">
</div>
</div>
.square {
border: 5px solid red;
text-align: center;
width: 50vw;
height: 50vw;
}
.content {
}
.content img{
height: 50vw;
width: 50vw;
}
Working Fiddle
Square Image
I am trying to make a banner for a webpage. I wanted create a container that only look up 20% of the page height-wise and then the image within it would take up 100% on the container. However, the image just ends up taking up all of the page and not responding to % changes.
Html code:
<div class="banner">
<img src="img/header.jpg">
</div>
CSS code:
.banner {
width: 100%;
height: 20%;
}
.banner img {
height : 100%;
width: 100%;
}
if you dont want to use a floating banner, you might consider to change your styling as this:
.banner {
width: 100%;
height: 20vh;
}
vh = view height. https://www.w3schools.com/cssref/css_units.asp.
and if you want floating banner to follow as your page scroll, use this:
.banner {
width: 100%;
height: 20vh;
position:fixed;
}
You can use vh instead of percentage for banner. 1vh = 1%
.banner {
width: 100%;
height: 20vh;
}
.banner img {
height : 100%;
width: 100%;
}
<div class="banner">
<img src="http://via.placeholder.com/350x150">
</div>
Instead of using the <img> tag you can set the image as the background of your container.
.banner{
background-image: url("/img/header.jpg");
}
Your .banner is not taking the height 20% from css. The reason is it does not have a parent element having height set. So here I have added height: 100% to html and body. Try the below example.
html,body{
height: 100%;
}
.banner {
width: 100%;
height: 20%;
background: green;
font-size: 0;
}
.banner img {
height : 100%;
width: 100%;
}
<div class="banner">
<img src="https://cdn.pixabay.com/photo/2015/12/13/09/42/banner-1090835_960_720.jpg">
</div>
Is this possible? The code below copies half of the behaviour, the image will always cover the div. The problem is that it'll always be cropped in both axis if the div is smaller than img's dimensions.
Adding a max-width: 100% or max-height: 100% to the img causes the image to distort. Is there any way to solve this without using JavaScript/background-img.
div {
background-color: red;
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
}
div.tall {
height: 400px;
}
div.wide {
width: 400px;
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
}
img.tallCat {
max-width: 100%;
}
img.wideCat {
max-height: 100%;
}
Expected output:
<div style="background-image:url(https://i.stack.imgur.com/XCOwb.jpg);background-size:cover;">
</div>
Actual output:
<div>
<img src="https://i.stack.imgur.com/XCOwb.jpg">
</div>
Actual output with max-width:
<div class="tall">
<img class="tallCat" src="https://i.stack.imgur.com/XCOwb.jpg">
</div>
Actual output with max-height:
<div class="wide">
<img class="wideCat" src="https://i.stack.imgur.com/XCOwb.jpg">
</div>
There is the object-fit parameter which does what you want (you can set it to cover or contain), but it isn't supported by IE/Edge yet: http://caniuse.com/#search=fit
Addition: Look at the settings in this snippet (original images size provided inside the image tag, CSS rules for image having width: 100%):
div {
background-color: blue;
position: relative;
width: 300px;
height: 200px;
margin-bottom: 50px;
}
img.x {
width: 100%;
object-fit: contain;
}
img.y {
width: 100%;
object-fit: cover;
}
<div>
<img src="http://placehold.it/500x200/fa0" width="500" height="200" class="x">
</div>
<div>
<img src="http://placehold.it/500x200/fa0" width="500" height="200" class="y">
</div>
Hide the image (visibility:hidden or opacity:0) and apply it to the div as a background image in your markup. Of course, if you do this, it begs the question as to why you need the img element at all.
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%;}
Is there a css-only solution to scale an image into a bounding box (keeping aspect-ratio)? This works if the image is bigger than the container:
img {
max-width: 100%;
max-height: 100%;
}
Example:
Use case 1 (works): http://jsfiddle.net/Jp5AQ/2/
Use case 2 (works): http://jsfiddle.net/Jp5AQ/3/
But I want to scale up the image until a dimension is 100% of the container.
Use case 3 (doesn't work): http://jsfiddle.net/Jp5AQ/4/
Thanks to CSS3 there is a solution !
The solution is to put the image as background-image and then set the background-size to contain.
HTML
<div class='bounding-box'>
</div>
CSS
.bounding-box {
background-image: url(...);
background-repeat: no-repeat;
background-size: contain;
}
Test it here: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain
Full compatibility with latest browsers: http://caniuse.com/background-img-opts
To align the div in the center, you can use this variation:
.bounding-box {
background-image: url(...);
background-size: contain;
position: absolute;
background-position: center;
background-repeat: no-repeat;
height: 100%;
width: 100%;
}
Note: Even though this is the accepted answer, the answer below is more accurate and is currently supported in all browsers if you have the option of using a background image.
Edit 2: In the modern age, using object-fit might be an even better solution: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
No, there is no CSS only way to do this in both directions. You could add
.fillwidth {
min-width: 100%;
height: auto;
}
To the an element to always have it 100% width and automatically scale the height to the aspect ratio, or the inverse:
.fillheight {
min-height: 100%;
width: auto;
}
to always scale to max height and relative width. To do both, you will need to determine if the aspect ratio is higher or lower than it's container, and CSS can't do this.
The reason is that CSS does not know what the page looks like. It sets rules beforehand, but only after that it is that the elements get rendered and you know exactly what sizes and ratios you're dealing with. The only way to detect that is with JavaScript.
Although you're not looking for a JS solution I'll add one anyway if someone might need it. The easiest way to handle this with JavaScript is to add a class based on the difference in ratio. If the width-to-height ratio of the box is greater than that of the image, add the class "fillwidth", else add the class "fillheight".
$('div').each(function() {
var fillClass = ($(this).height() > $(this).width())
? 'fillheight'
: 'fillwidth';
$(this).find('img').addClass(fillClass);
});
.fillwidth {
width: 100%;
height: auto;
}
.fillheight {
height: 100%;
width: auto;
}
div {
border: 1px solid black;
overflow: hidden;
}
.tower {
width: 100px;
height: 200px;
}
.trailer {
width: 200px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tower">
<img src="http://placekitten.com/150/150" />
</div>
<div class="trailer">
<img src="http://placekitten.com/150/150" />
</div>
Here's a hackish solution I discovered:
#image {
max-width: 10%;
max-height: 10%;
transform: scale(10);
}
This will enlarge the image tenfold, but restrict it to 10% of its final size - thus bounding it to the container.
Unlike the background-image solution, this will also work with <video> elements.
Interactive example:
function step(timestamp) {
var container = document.getElementById('container');
timestamp /= 1000;
container.style.left = (200 + 100 * Math.sin(timestamp * 1.0)) + 'px';
container.style.top = (200 + 100 * Math.sin(timestamp * 1.1)) + 'px';
container.style.width = (500 + 500 * Math.sin(timestamp * 1.2)) + 'px';
container.style.height = (500 + 500 * Math.sin(timestamp * 1.3)) + 'px';
window.requestAnimationFrame(step);
}
window.requestAnimationFrame(step);
#container {
outline: 1px solid black;
position: relative;
background-color: red;
}
#image {
display: block;
max-width: 10%;
max-height: 10%;
transform-origin: 0 0;
transform: scale(10);
}
<div id="container">
<img id="image" src="https://upload.wikimedia.org/wikipedia/en/7/7d/Lenna_%28test_image%29.png">
</div>
Today, just say object-fit: contain. Support is everything but IE: http://caniuse.com/#feat=object-fit
html:
<div class="container">
<img class="flowerImg" src="flower.jpg">
</div>
css:
.container{
width: 100px;
height: 100px;
}
.flowerImg{
width: 100px;
height: 100px;
object-fit: cover;
/*object-fit: contain;
object-fit: scale-down;
object-position: -10% 0;
object-fit: none;
object-fit: fill;*/
}
You can accomplish this with pure CSS and complete browser support, both for vertically-long and horizontally-long images at the same time.
Here's a snippet which works in Chrome, Firefox, and Safari (both using object-fit: scale-down, and without using it):
figure {
margin: 0;
}
.container {
display: table-cell;
vertical-align: middle;
width: 80px;
height: 80px;
border: 1px solid #aaa;
}
.container_image {
display: block;
max-width: 100%;
max-height: 100%;
margin-left: auto;
margin-right: auto;
}
.container2_image2 {
width: 80px;
height: 80px;
object-fit: scale-down;
border: 1px solid #aaa;
}
Without `object-fit: scale-down`:
<br>
<br>
<figure class="container">
<img class="container_image" src="https://i.imgur.com/EQgexUd.jpg">
</figure>
<br>
<figure class="container">
<img class="container_image" src="https://i.imgur.com/ptO8pGi.jpg">
</figure>
<br> Using `object-fit: scale-down`:
<br>
<br>
<figure>
<img class="container2_image2" src="https://i.imgur.com/EQgexUd.jpg">
</figure>
<br>
<figure>
<img class="container2_image2" src="https://i.imgur.com/ptO8pGi.jpg">
</figure>
Another solution without background image and without the need for a container (though the max sizes of the bounding box must be known):
img{
max-height: 100px;
max-width: 100px;
width: auto; /* These two are added only for clarity, */
height: auto; /* as the default is auto anyway */
}
If a container's use is required, then the max-width and max-height can be set to 100%:
img {
max-height: 100%;
max-width: 100%;
width: auto; /* These two are added only for clarity, */
height: auto; /* as the default is auto anyway */
}
div.container {
width: 100px;
height: 100px;
}
For this you would have something like:
<table>
<tr>
<td>Lorem</td>
<td>Ipsum<br />dolor</td>
<td>
<div class="container"><img src="image5.png" /></div>
</td>
</tr>
</table>
This example to stretch the image proportionally to fit the entire window.
An improvisation to the above correct code is to add $( window ).resize(function(){});
function stretchImg(){
$('div').each(function() {
($(this).height() > $(this).find('img').height())
? $(this).find('img').removeClass('fillwidth').addClass('fillheight')
: '';
($(this).width() > $(this).find('img').width())
? $(this).find('img').removeClass('fillheight').addClass('fillwidth')
: '';
});
}
stretchImg();
$( window ).resize(function() {
strechImg();
});
There are two if conditions. The first one keeps checking if the image height is less than the div and applies .fillheight class while the next checks for width and applies .fillwidth class.
In both cases the other class is removed using .removeClass()
Here is the CSS
.fillwidth {
width: 100%;
max-width: none;
height: auto;
}
.fillheight {
height: 100vh;
max-width: none;
width: auto;
}
You can replace 100vh by 100% if you want to stretch the image with in a div. This example to stretch the image proportionally to fit the entire window.
Are you looking to scale upwards but not downwards?
div {
border: solid 1px green;
width: 60px;
height: 70px;
}
div img {
width: 100%;
height: 100%;
min-height: 500px;
min-width: 500px;
outline: solid 1px red;
}
This however, does not lock aspect-ratio.
I have used table to center image inside the box. It keeps aspect ratio and scales image in a way that is totally inside the box. If the image is smaller than the box then it is shown as it is in the center. Below code uses 40px width and 40px height box. (Not quite sure how well it works because I removed it from another more complex code and simplified it little bit)
.SmallThumbnailContainer {
display: inline-block;
position: relative;
float: left;
width: 40px;
height: 40px;
border: 1px solid #ccc;
margin: 0px;
padding: 0px;
}
.SmallThumbnailContainer {
width: 40px;
margin: 0px 10px 0px 0px;
}
.SmallThumbnailContainer tr {
height: 40px;
text-align: center;
}
.SmallThumbnailContainer tr td {
vertical-align: middle;
position: relative;
width: 40px;
}
.SmallThumbnailContainer tr td img {
overflow: hidden;
max-height: 40px;
max-width: 40px;
vertical-align: middle;
margin: -1px -1px 1px -1px;
}
<table class="SmallThumbnailContainer" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="https://www.gravatar.com/avatar/bf7d39f4ed9c289feca7de38a0093250?s=32&d=identicon&r=PG" width="32" height="32" alt="OP's SO avatar image used as a sample jpg because it is hosted on SO, thus always available" />
</td>
</tr>
</table>
Note: the native thumbnail size in this snippet is 32px x 32px, which is smaller than its 40px x 40px container. If the container is instead sized smaller than the thumbnail in any dimension, say 40px x 20px, the image flows outside the container in the dimensions that are smaller than the corresponding image dimension. The container is marked by a gray 1px border.
Use Object Fit on both div and img to scale image
<div class="box"><img src="image.jpg"></div>
.box {height: auto;
object-fit: cover;}
img { height: 100%; object-fit: cover; }
This worked for my needs, doesn't flatten out the image while setting height limitation, it overflows instead.
.top-container{
width:50%;
}
.img-container {
display: flex;
justify-content: center;
align-items: center;
height: 40vh;
width: 100%;
overflow: hidden;
}
.img-container img {
max-width: 10%;
max-height: auto;
transform: scale(10);
}
<div class='top-container'>
<div class='img-container'>
<img src='image.jpg'>
</div>
</div>
First some CSS:
div.image-wrapper {
height: 230px; /* Suggestive number; pick your own height as desired */
position: relative;
overflow: hidden; /* This will do the magic */
width: 300px; /* Pick an appropriate width as desired, unless you already use a grid, in that case use 100% */
}
img {
width: 100%;
position: absolute;
left: 0;
top: 0;
height: auto;
}
The HTML:
<div class="image-wrapper">
<img src="yourSource.jpg">
</div>
.img-class {
width: <img width>;
height: <img height>;
content: url('/path/to/img.png');
}
Then on the element (you can use javascript or media queries to add responsiveness):
<div class='img-class' style='transform: scale(X);'></div>
.boundingbox {
width: 400px;
height: 500px;
border: 2px solid #F63;
}
img{
width:400px;
max-height: 500px;
height:auto;
}
With the styles set as shown above in css, now the following html div will show the image always fit width wise and will adjust hight aspect ratio to width. Thus image will scale to fit a bounding box as asked in the question.
<div class="boundingbox"><img src="image.jpg"/></div>