Fit height or width of an image in a div, the smaller one

Question

I'm trying to create a mural designer where the user can choose or upload an image. The user can set the dimension of a virtual wall and zoom or move the image over this wall. My problem is I want that when the image width is smaller than the height, the width of the image fits exactly the width of the wall (at least when the user chooses or uploads the image). The other case is when the height of the image is smaller than the width I want that the height of the image fits exactly the height of the wall. I can achieve that for the first case but not for the second case. The problem is not to know if the height or width is smaller but my problem is to fit the height of the image to the height of the wall when this height is smaller than the width. I'm using react, antd and MapInteractionCSS (for zoom and move) libraries. Here is my App.js code:

    <SquareDraw height={dim.height} width={dim.width} rate={dim.rate}>
      <MapInteractionCSS 
        value={zoom.value}
        onChange={(value) => setZoom({ value })} 
      >
        <img alt="" style={{width: '100%', height: 'auto'}} src={files.previewImage} />
      </MapInteractionCSS>
    </SquareDraw>

I'm just showing the code of the virtual wall. And the SquareDraw component:

import React from 'react'

export const SquareDraw = (props) => {
    return (
        <div 
        style={{
            border: '1px solid grey', 
            width: `${props.height > props.width ? (('350').toString() / 15) * props.rate + 'em' : '23.333em'}`, 
            height: `${props.width > props.height ? (('350').toString() / 15) * props.rate + 'em' : '23.333em'}`}}
        >
            {props.children}
        </div>
    )
}

The problem is the image does not fit the heigth to the virtual wall. This is the image:

And this is the result of choosing the image:

I just want the height of the image to be equal to the height of the virtual wall.

If I set the object-fit attribute to contain I see it like this:

Does anyone know how can I do that? If something is not explained correctly please tell me. Thanks!!

score 1 · Answer 1 · edited Dec 27 '20 at 16:36

1

Since you have the dimensions set for the div container, perhaps using object-fit: contain; will help. Here is the code that I used:

I used contain based on what I read, but perhaps other values could help.

.wall {
  height: 300px;
  width: 300px;
  background-color: red;
}

.wall img {
  object-fit: contain;
  height: 100%;
  width: 100%;
}

<div class="wall">
  <img src="http://placekitten.com/300/200" alt="">
</div>

edited Dec 27 '20 at 16:36

DCR

14,737
12
52
115

answered Dec 27 '20 at 01:38

Max

109
2

I tried this but it's not working. I tried different object-fit attributes but no one works... – Xim123 Dec 27 '20 at 15:48
the code you show looks to work. what's the problem? – DCR Dec 27 '20 at 16:35
I updated the question. The problem is the image not fits the height exactly, it's smaller. – Xim123 Dec 27 '20 at 17:10

DCR · Answer 2 · 2020-12-27T16:44:04.583

0

the issue you have is your container is square and your image is not. You can either set the image width to the container or width or the image height to the container height. If the later you'll enlarge the picture and then crop it. Pretty kitty.

.wall {
  height: 300px;
  width: 300px;
  background-color: red;
}

.wall img {
  
  height: 100%;
 
}

<div class="wall">
  <img src="http://placekitten.com/300/200" alt="">
</div>

edited Dec 27 '20 at 16:44

answered Dec 27 '20 at 16:38

DCR

14,737
12
52
115

If I do that the height of the image is bigger than the wall. The result is the same as I show in the first part of the question. – Xim123 Dec 27 '20 at 17:13

Fit height or width of an image in a div, the smaller one

2 Answers2