I have the following css:
.mod.left {
background-image: url("http://www.myimage.jpg");
display: block;
height: 160px;
overflow: hidden;
width: 175px;
}
That corresponds to this HTML:
<div class="mod left"></div>
It results in this mess:
if I use the css3 background-size: 175px 160px; The aspect ratio is really messed up resulting in a mess like this:
Is there a way to stretch an image to fit a div? But in a way in which the aspect ratio is maintained? I want an auto crop.
This should work (in browsers which support background-size):
background-size: 175px auto;
You could also try:
background-size: cover;
Or:
background-size: contain;
There's a good explanation on MDC.
Does it need to be a background image?
img{
width:300px;
height:auto;
}
<img src="your-photo.png">
You can use the background-size property with the contain value:
background-size: contain;
Here is a working example:
https://jsfiddle.net/gusrodriguez/auuk97hf/1/
In the example above, the body has an stretched image in the background. Also there are two divs with arbitrary size, and with another image that fits and keep the aspect ratio.
You can use the CSS Object-fit property.
{
height: 160px;
width: 175px;
object-fit: cover;
}
Object-fit can have the following values.
contain, cover, fill, none, scale-down. Please refer to above link for more info.
I found this method, if using an img not a background:
min-width: 100%;
max-width: 100%;
min-height: 100%;
max-height: 100%;
object-fit: contain;
Related
I'm trying to make a carousel using CSS, but I want the image to not distort when enlarged and still take up most of the screen. I made a little code showing my problem.
div.some{
width: 1400px;
height: 900px;
background-color: red;
}
img{
width: 100%;
max-height: 500px;
}
HTML
<div class="some">
<img src="IMG_7331.jpg" alt="">
</div>
This is the result:
And this is what happen if i use, background-size, or object-fit.
div.some{
width: 1400px;
height: 900px;
background-color: red;
}
img{
width: 100%;
height: auto;
max-height: 500px;
object-fit: cover;
}
How can you see, the image is cropped, how can I keep the image without distortion, if I modify the height and make it smaller or a maximum, just like the image below.
However I would like to do something like this:
How can I see the image occupies the whole screen and when modifying its height it is not distorted, how can I do this?
You can use the CSS object-fit property. So in your case, the CSS would like this:
img {
width: 100%;
height: 100%;
max-height: 500px;
object-fit: cover;
}
Furthermore you can use the object-position property to specify the alignment of the image. It defaults to the center (50% 50%).
Read more on object-fit and object-postion.
Make sure you use high-resolution asset images for the maximum (wanted) screen size(device-width)
Use css background-size property: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
For best practice, add value to thealt attribute
This is an issue that has plagued me ever since I've started really learning CSS. I know how to set a background-image and using background-size: cover to get it to scale. However, I don't know how to properly fit the image in the header of...let's say something like 10vh or 50%.
html, body {
width: 100%;
height: 100%;
}
#main-head {
background: url('./header-image.jpeg');
background-size: cover;
height: 70%;
}
I'll see...
Example:1
I've tried doing background-size: contain, and though it seems like to be more or less what I'm aiming for...I feel like the aspect ratio is...off...
html, body {
width: 100%;
height: 100%;
}
#main-head {
background: url('./header-image.jpeg');
background-size: 100% 100%;
height: 70%;
}
I had the body set to height: 100...and this was the result...
Example:2
Ultimately, what I'm trying to do is have the background-image completely fit within the given container (Here it's main-head) but I don't know how this is even possible.
you can use background-position: center; to keep the image center.
and if you want make <img/> auto scale. you can use object-fit to make it. (ps: IE not support object-fit)
Update background-size: cover will maintain the aspect ratio.
Also, you may want to have the background centered by setting background-position: center;
#main-head {
background: url('./header-image.jpeg');
background-size: cover; // <-- maintain the aspect ratio, make it cover the element
background-position: center; // <-- this will make the background center
height: 70%;
}
I seem to be having some issues with an image. It's not sticking to the same width when I modify the max height, like below.
.lead-pic img {
background-size: cover;
margin-left: -150px;
max-height: 1000px;
What I'm trying to achieve is an image that covers both sides of the page and also reduce the height of the image at the same time. I'm not sure if there is some code that locks the width in place when you change the height pixels.
Here is a screenshot of what I mean when I change the height:
This is on wordpress within a staging environment so I can't provide a URL to the website. Any ideas?
you can set only one property to image either height or width. If you set both the image will blur, aspect ratio is not same as original image. Try to wrap image in one element set property to that wraping element and assign max-width: 100%; to image tag.
If I am not wrong on this one, if you use the background-size property it will not be aplied to your image which is coded in your HTML file. For this you need to ad a background: url(link/to/image.png)
.lead-pic {
background: url(link/to/image.png);
background-position: top;
background-size: cover;
margin-left: -150px;
max-height: 1000px;
Example:
.lead-pic {
background: url(http://lorempixel.com/400/200);
background-position: top;
background-size: cover;
height: 300px;
width: 450px;
}
<div class=lead-pic></div>
Hope this helps. And, correct me if I'm wrong :).
If you want it as a background and to automatically adjust size, try making the image position fixed and putting your content in div with position:absolute. Use vh and vw to set the size. vh and vw are percentages of the current viewport height (vh) or width (vw).
i.e.: height:100vh = 100% of the current viewport height.
.lead-pic {
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
}
.content-example {
position: absolute;
top: 0;
left: 0;
width: 100vh;
height: 100vh;
}
<img class="lead-pic" src="https://s-media-cache-ak0.pinimg.com/736x/7f/d7/ab/7fd7ab72321777f4413ae3485622896c.jpg" />
<div class="content-example">
All of your content can go here.
</div>
Keep in mind that this will stretch the image disregarding the aspect ratio and will degrade the quality. If you want to keep the quality of the image, set it to 100vh/vw in the direction of the shortest dimension (in this case, width:100vw). The following snippet expands the image width, only:
ADDED AFTER CORRESPONDENCE, BELOW
This will get you the div like I understand you want it. If you want to add parallax functionality, I'd suggest searching for "Pure CSS parallax"
.lead-pic-container
{
max-height:200px;
height:200px;
width:100vw;
overflow:none;
background-size:cover;
background-image: url('https://s-media-cache-ak0.pinimg.com/736x/7f/d7/ab/7fd7ab72321777f4413ae3485622896c.jpg');
background-position: 50% -325.828px;
}
<br><br><br>
<div class="lead-pic-container"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Solved.
With combined information from stack overflow users, here is the answer:
.lead-pic {
background-image: url(http://www.cutepinkboutique.com/staging/wp-content/uploads/2017/06/pexels-photo-220436-1.jpeg);
background-size: cover;
height: 900px;
width: 2000px;
margin-left: -220px;
background-position: 50% center;
}
.move-pic {
padding: 120px;
height: 1000px;
width: 100%;
}
I can't show an image well with fixed height because shows stretched, i want to position image.
I want to can use large images with 300px of fixed height but the image can't show stretched.
The image link have to come in img tag because it come from database.
I put here a example code:
.image
{
position:relative;
width: 100%;
height: 300px;
}
.image img
{
width: 100%;
height: 300px;
}
<div class="image">
<img src="http://2.bp.blogspot.com/-isrPay4twtQ/UWudn23k1sI/AAAAAAAAAZQ/vDeXHzTJxeU/s1600/imagens-lindas+(1).jpeg"/>
</div>
Thank you
Use background-image inline and just cover it using background-size: cover;
.image
{
position:relative;
width: 100%;
height: 300px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
<div class="image" style="background-image: url('http://2.bp.blogspot.com/-isrPay4twtQ/UWudn23k1sI/AAAAAAAAAZQ/vDeXHzTJxeU/s1600/imagens-lindas+(1).jpeg'); "></div>
You can use object-fit to get the same
The object-fit property defines how an element responds to the height
and width of its content box. It's intended for images, videos and
other embeddable media formats in conjunction with the object-position
property. Used by itself, object-fit lets us crop an inline image by
giving us fine-grained control over how it squishes and stretches
inside its box.
object-fit can be set with one of these five values:
fill: this is the default value which stretches the image to fit the
content box, regardless of its aspect-ratio.
contain: increases or decreases the size of the image to fill the
box whilst preserving its aspect-ratio.
cover: the image will fill the height and width of its box, once
again maintaining its aspect ratio but often cropping the image in
the process. none: image will ignore the height and width of the
parent and retain its original size.
scale-down: the image will compare the difference between none and
contain in order to find the smallest concrete object size.
Object-fit
.image
{
position:relative;
width: 100%;
height: 300px;
}
.image img
{
width: 100%;
object-fit:cover;
height: 300px;
}
<div class="image">
<img src="http://2.bp.blogspot.com/-isrPay4twtQ/UWudn23k1sI/AAAAAAAAAZQ/vDeXHzTJxeU/s1600/imagens-lindas+(1).jpeg"/>
</div>
you can use this
.image
{
position:relative;
width: 100%;
height: 300px;
background-image:url('http://2.bp.blogspot.com/-isrPay4twtQ/UWudn23k1sI/AAAAAAAAAZQ/vDeXHzTJxeU/s1600/imagens-lindas+(1).jpeg');
background-size: cover;
}
<div class="image">
</div>
You cannot use width and height for an image tag it will stretch the image. So use either width or height.
.image
{
position:relative;
width: 100%;
height: 300px;
}
.image img
{
max-height: 300px;
}
Or Use
object-fit:cover;
But image will crop.
When using a background image on a Div I am not able to display the full height of the image, neither using height:auto; or height: 100%. Why so?
How can I solve the problem?
I have created a JS Fiddle here: https://jsfiddle.net/2d0npz2v/5/
body, html {
height: 100%;
margin: 0px;
}
.imageContainer2 {
background-image: url("http://i.imgur.com/AWi7r5m.jpg");
background-position: center top;
background-size: 100% auto;
height: 100%;
}
<div class="imageContainer2"></div>
UPDATE
Just for clarity, the image needs to be 100% width, and auto height (not cut at the bottom).
This example works but it's using the "content" property instead of the "background-image": https://jsfiddle.net/j47a6x7s/. I am looking for the same behaviour but without using content.
Well, the reason why this is?
In your working example you use content. A content has it's own height and uses up space, which the other elements on the page have to respect.
With the background-image solution, you use a background, which does not use space. The .imageContainer2 element can not know about the height of the background-image AND adapt itself to it.
This very problem was addressed here: How to get div height to auto-adjust to background size?
Just check, if the workaround is suitable for you
If the image(s) you want to display in the background property always has the same aspect ratio, you can use one of the techniques explained here to make the div keep the same aspect ratio as the image according to the width.
With your example it would look like this :
body, html {
height: 100%;
margin: 0px;
}
.imageContainer2 {
background-image: url("http://i.imgur.com/AWi7r5m.jpg");
background-position: center top;
background-size: auto 100%;
padding-bottom:178%;
background-repeat:no-repeat;
}
<div class="imageContainer2"></div>
Note that I don't know what you are trying to achieve exaclty. Using this method to display an image probably isn't semanticaly correct depending on the context.
var bgImg = new Image();
bgImg.src = $('.test').css('background-image').replace(/"/g,"").replace(/url\(|\)$/ig, "");
bgImg.onload = function() {
$('.test').css({'height':this.height,'width':this.width});
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<div class="test" style="background-image: url('https://images.pexels.com/photos/36487/above-adventure-aerial-air.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');">
</div>
Hope this exactly solves your issue.
Try giving these three to your .imageContainer2:
.imageContainer2 {
position: fixed;
width: 100%;
height: 100%;
}
Fiddle: https://jsfiddle.net/jsse9yL3/
You have to use an IMG for do that. Why you are insisting using CSS?
Example:
.container img
{
width: 100%;
height: auto;
}
<div class="container">
<img src="http://www.wallpaperawesome.com/wallpapers-awesome/wallpapers-full-hd-1080-x-1920-smatphone-htc-one-lumia-1520-lg-g2-galaxy-s4-s5-awesome/wallpaper-full-hd-1080-x-1920-smartphone-vertical-stiped-nebula.jpg"/>
</div>
You can't calculate the background-image height with a CSS rule and then make the DIV height's equal.
The closest solution for your problem is using a background-cover with all the related "issues".
UPDATE
Another CSS solution could be the padding-trick way, as follows:
.container
{
background-image: url('http://www.wallpaperawesome.com/wallpapers-awesome/wallpapers-full-hd-1080-x-1920-smatphone-htc-one-lumia-1520-lg-g2-galaxy-s4-s5-awesome/wallpaper-full-hd-1080-x-1920-smartphone-vertical-stiped-nebula.jpg');
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 177.77%; /* img-height / img-width * container-width (1920 / 1080 * 100) */
}
<div class="container">
</div>
I suggest anyway to use the first solution.
You can use:
.imageContainer2 {
overflow: hidden;
position: relative;
background-repeat: no-repeat;
background-position: 50%;
margin: auto;
min-height: 100vh;
background-size: cover;
}
Try to:
body {
padding: 0px;
}