CODEWITHSUNDEEP
javascripthtmlcssreactjs
Norayr Ghukasyan
Norayr Ghukasyan

Reputation: 1408

How to adjust image dimensions within parent container?

I am trying to adjust the image dimensions after uploading it. Let's assume my uploaded image originally has 450x700 dimensions and its parent container has 400x400 dimensions. In my case, I use object-fit to fit image its parent container by preserving aspect ratio and it looks like

enter image description here

But I need to show image fully and object-fit is not the right option for this case. Removing object-fit and adding width and height with 100% makes it fully visible, meanwhile decreasing the quality. Here it looks like

enter image description here

enter image description here

In the last image the original image is this

enter image description here

UPDATED

Actually, I can solve it with object-fit: contain, but it's not 100 percent right for me or maybe there is no other way. With contain, I get this

enter image description here

You can notice the white background of the image, which doesn't come well with background color of the container (which is light gray). Is there any possibility to solve it?

Upvotes: 0

Views: 468

Answers (5)

Awais
Awais

Reputation: 4902

If its image tag you can set object-fit:contain along with height and width and if its background image you can set background-size:contain

Upvotes: 1

Shrujal Goswami
Shrujal Goswami

Reputation: 21

image-parent assume this is your parent container class.so you can add css like this

.image-parent img{
    height:400px;
    width:auto;
    display:block;
    margin:0 auto;
}

Upvotes: 1

Nethra
Nethra

Reputation: 609

you can use css property..

background: url('images_here')no-repeat center center
 background-size: cover (or) contain
 width:400px;
 height: 400px;

Upvotes: 1

Thomas Grástein
Thomas Grástein

Reputation: 83

If you want the full image to be visible you should use object-fit: contain, see https://www.w3schools.com/css/css3_object-fit.asp.

<html>
<head>
<style>
.contain {object-fit: contain;}
</style>
</head>
<body>

<h1>The object-fit Property</h1>

<h2>object-fit: contain:</h2>
<img class="contain" src="SOMEFILENAME.jpg" alt="Paris" style="width:200px"> <!--Put the restricting size value here-->

</body>
</html>

Upvotes: 1

Oliver
Oliver

Reputation: 3138

When you say object-fit doesn't work, is that because it's cropping the image? And did you try changing object-fit: cover to object-fit: contain?

Another option is to have the image as a background image, and set background size to contain too. This will scale the image to fit within the bounds accordingly. e.g.

.image__wrapper {
    background: url(../your-img.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

Unfortunately, stretching the image to fit will always distort and therefore degrade the image.

Upvotes: 2

Related Questions