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
Related
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.
I have 3 columns and 3 images with different aspect ratio and resolution.
I set width: 100%; and I want to crop the bottom of each image so that each will have height: 600px;
I try this but it leads to compression or stretching of img
img{
width: 100%;
max-height: 600px;
overflow: hidden;
}
use height: auto, erase the max-width: 600px and leave overflow: hidden.
as an alternative solution you could define the images as background images for their containers (i.e. no <img> tags) and use background-size: cover; and background-position: center on them.
I've created a responsive site and the images are set to:
max-width: 100%;
height: auto;
This is great and resizes the images for different screen devices and scaling of the window. However my images are varies sizes abut 5-30px differences. Is there a way to have them all the same height and width but also to auto scale.
I've tried adding height="170" and width="190" but this doesnt seem to work.
How can i have them set to the same size without manually resizing all images.
Example is here;
http://www.cartoonquiz-answers.com/Solutions/Level8
As you can see above the image for answer "King Julien" is slightly larger, as a result makes the next row with one image, instead of filling each row with 4 images.
thanks
If you want to force all images to the same size, just set a general CSS rule:
img
{
width: 190px;
height: 170px;
}
If you want them to scale, use percentages instead:
img
{
width: 100%;
}
This will force all images to fill their containers (and will maintain their aspect ratios).
You could force an aspect ratio:
.reviewname:before {
display: block;
content: "";
padding-top: 80%; /* aspect ratio */
}
.reviewname {
position: relative;
}
.reviewname > img {
position: absolute;
top: 0px;
width: 100%;
height: 100%;
left: 0px;
}
I think you have two options:
Use CSS background images (see below) or...
Crop/Resize the images to all the same height and width.
Here's a handy way to use background images: (not supported in all browsers)
<img style="background-image: url('/path_to_your_images/yourimage.png');" class="bgimg">
.bgimg {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
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;