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.
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
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 one problem that I can't solve, I need my banner to be full width, not boxed. For example: the page is 1024px witdh and my banner is 800px width, now i need my banner to be 100% width. If you understand me, so, my friend and me we was trying a lot of options but we didnt figured it out.
Here is my CSS code with banner:
#banner{
background-image: url(mats/banner.jpg);
width: 100%;
height: 470px;
background-repeat: no-repeat;
position: relative;
background-position: center;
display: block;
}
I have tried everything but nothing successful.
It is background-size.
background-size: 100%;
On applying this property, your background image(800px width) would strech to 1024px, which results in image quality loss.
Better applying this property on images with width > 1200px
If the height: 470px is also intended as background height, dont use it.
Never set height & width on a image, it changes the aspect ratio. If one is set, the other will auto adjust according to, else Images looks shrinked or stretched
I think you might missing background-size
#banner{
background-image: url(mats/banner.jpg);
background-size: 100%;
width: 100%;
height: 470px;
background-repeat: no-repeat;
position: relative;
background-position: center;
display: block;
}
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;