0

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?

Norayr Ghukasyan
  • 1,298
  • 1
  • 14
  • 28

5 Answers5

2

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.

Oliver
  • 2,930
  • 1
  • 20
  • 24
  • If the background of the image is always white, you can just set a background colour to the parent wrapper (e.g. `background-color: white`) – Oliver Nov 29 '19 at 12:45
1

you can use css property..

background: url('images_here')no-repeat center center
 background-size: cover (or) contain
 width:400px;
 height: 400px;
Nethra
  • 579
  • 2
  • 8
1

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>
Thomas Grástein
  • 83
  • 5
1

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;
}
deHaar
  • 17,687
  • 10
  • 38
  • 51
Shrujal Goswami
  • 21
  • 3
1

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

Awais
  • 4,752
  • 4
  • 17
  • 40
  • This is only possible if you edit images before upload else you have to scarifies one thing either full image with image cut or contain image with background. The other hack is use some color class to fill background with you image background but that not possible for you when unknown images uploaded @NorayrGhukasyan – Awais Nov 29 '19 at 11:36
  • Pleasure is all mine @NorayrGhukasyan but i suggest you to visit the ans of KEVIN in this link may be that help you https://stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container – Awais Nov 29 '19 at 11:43