图像高度大小不会改变，只有宽度会改变

Question

I know it a bit strange to ask from the title, but I have a problem when changing the size of image inside the carousel. no matter what I did the height of my image doesn't change instead it looks like give an effect like object-fit: cover what I want is to show the image to have size around width: 30vw; and height: 30vh; but every time I change the width its work but when I change the height its not work.

I have some guess such as the container size, the col size, and the div that wrap my image will work if i change their size but in the end its not.

I already read some topic about this :

css-object-fit-contain-is-keeping-original-image-width-in-layout

scaling-centering-and-cropping-image-with-object-fit-and-object-position

but it still not work. Let's say I want to make my image size around width: 360px and height: 360px for example

this is my code:

import React from "react";

// CSS
import './klien.css'

const Klien = () => {

    return (
        <div className="klien">
            <div className="klien-container">
                <p className="section-title">Klien Kita</p>

                <div className="carousel slide" data-ride="carousel">

                    <div className="carousel-item active">
                        <div className="col-12 col-sm-12 col-md-8 col-lg-8 card-center card-size">
                            <div className="mb-3">                    
                                <div className="text-center">
                                    <img className="img-size" src="http://placehold.it/360x360" alt="klien-logo" />
                                </div>              
                            </div>
                        </div>
                    </div>

                    <div className="carousel-item">
                        <div className="col-12 col-sm-12 col-md-8 col-lg-8 card-center card-size ">
                            <div className="mb-3">                    
                                <div className="text-center">
                                    <img className="card-img-top img-size" src="http://placehold.it/360x360" alt="klien-logo" />
                                </div>              
                            </div>
                        </div>
                    </div>

                    <div className="carousel-item">
                        <div className="col-12 col-sm-12 col-md-8 col-lg-8 card-center card-size">
                            <div className="mb-3">                    
                                <div className="text-center">
                                    <img className="card-img-top img-size" src="http://placehold.it/360x360" alt="klien-logo" />
                                </div>              
                            </div>
                        </div>
                    </div>

                    <div className="carousel-item">
                        <div className="col-12 col-sm-12 col-md-8 col-lg-8 card-center card-size">
                            <div className="mb-3">                    
                                <div className="text-center">
                                    <img className="card-img-top img-size" src="http://placehold.it/360x360" alt="klien-logo" />
                                </div>              
                            </div>
                        </div>
                    </div>

                </div> 
            </div>
        </div>
    );        
}

export default Klien;

and this is my css:

.klien{
    background-color: #f6f7fd;
    min-height: 50vh;
}

.klien .klien-container{
    overflow: hidden;
    padding-top: 10vh;
}

.klien .section-title{
    color: #3b73c5;
    font-size: 3em;
    font-weight: 500;
    text-align: center;
}

.klien .carousel-size{
    /* height: 20vh; */
}

.klien .card-center{
    margin: 0% auto;
}

.klien .text-center{
    text-align: center;
}

.klien .card-size{
    max-height: 20vh;
}

.klien .img-container{
    height: 20vh;
    width: 20vh;
}

.klien .img-size{
    width: 30vw;
    height: 30vh;
    /* object-fit: contain; */
}

can someone help and give explanation about my problem? in first I thought maybe it is because of object-fit: contain but it seems my guess about it is wrong

this is the screenshot:

Answer 1

I would recommend to use a div with a background image, that way you have control of the responsiveness of your list. It requires almost nothing to perform that change.

You need to change your img tags to div

<div
  className="img-size"
  style={{ backgroundImage: `url(${"http://placehold.it/360x360"})`}}
/>

Your css

.klien .img-size{
    width: 30vw;
    height: 30vh;
    margin: 0 auto;
    background-position: center;
    background-size: cover;
    /* object-fit: contain; */
}

I made a codepen with this. Hope it helps, if you want another approach you can tell me.

Answer 2

Have you tried to change the image size using inline css? For example <img src="url" width="specified with in px or %">