Question 178484 in Html Question posted in
Some basic documentation can be found here.

Can CSS unsquish an image?

Can anyone help me to make my picture unsquished in HTML & CSS?

I style the image in html based on the CSS code Figma gave me, however it’s different ratio from the original picture, so the image appeared squished. Thank you!

I tried to use max-width, 100vw, etc. but it didn’t work.

.foto_1 {
  position: absolute;
  left: 89px;
  top: 10px; /* 904px; */
}
<div class="foto_1">
  <img src="https://via.placeholder.com/800x1600" alt="" style="width: 551px; height: 590px;">
</div>
Tags:

4

Answers


  1. 0

    You should set a percent for the width to your desired size. Currently have a fixed height and width which will cause the results you’re seeing.

    <div class="foto_1"><img src="/ansmet item 1.jpg" alt="" style="width:50%"></div>
    Login or Signup to reply.
  2. 0

    My prefered method is using background options from css. It gives you controll about if you want it cropped (=cover) or completely visible (=contain). If you want you can also change the position, if eg if the top of you images more often is important.

    .foto_1 {
  /* other properies */
  width: 400px;
  height: 150px;
  background:pink; /* just for demo */
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.foto_2 {
  /* other properies */
  width: 400px;
  height: 150px;
  background:pink; /* just for demo */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
    <div class="foto_1" style="background-image: url('https://via.placeholder.com/800x1600');"></div>
<br />
<div class="foto_2" style="background-image: url('https://via.placeholder.com/800x1600');"></div>

    The reason yours doesnt work is because your explicitly telling it to take those dimenstion. It is doing exactly what you’re telling it to do.

    Login or Signup to reply.
  3. 0

    The reason it is appearing squished is because the aspect ratio you are trying to resize to is different to the aspect ratio of the image. There’s a few ways to fix it:

    1. Width OR Height

    If you need to fit it into 1 specific dimension (e.g. height of 590px), you can omit the other property and the browser will automatically resize your image to the correct aspect ratio

    .foto_1 {
  position: absolute;
  left: 89px;
  top: 904px;
}
    <div class="foto_1">
  <img src="https://via.placeholder.com/800x1600" alt="" height="590">
</div>

    2. Object-Fit

    If you need the image to fit in that specific space, you need to decide which sacrifice you want to make – not showing the full image, showing the full image but having whitespace around it, or stretching it. This can be achieved with the object-fit property

    .foto_1 {
  position: absolute;
  left: 89px;
  top: 904px;
}

.foto_1 img{
  object-fit: contain;
}
    <div class="foto_1">
  <img src="https://via.placeholder.com/800x1600" alt="" width="551" height="590">
</div>
    Login or Signup to reply.
  4. 0

    You could set the desired width or height of the image, and then set the other value to auto, like this:

    <img src="https://via.placeholder.com/800x1600" style="width: 300px; height: auto;"/>

    OR

    <img src="https://via.placeholder.com/800x1600" style="width: auto; height: 300px;"/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search