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

Question

我知道从标题上问有点奇怪，但是我在更改轮播中的图像大小时遇到​​了问题。无论我做什么，我的图像高度都不会改变，而是看起来像object-fit: cover这样的效果我想要的是显示图像的大小在width: 30vw;和height: 30vh;左右，但每次我改变width 可以工作，但是当我更改 height 时，它就不行了。

我有一些猜测，例如容器大小、col 大小和包装我的图像的 div，如果我改变它们的大小，但最终它不是。

我已经阅读了一些关于此的主题：

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

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

但它仍然无法正常工作。例如，假设我想让我的图像大小在 width: 360px 和 height: 360px 左右

这是我的代码：

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;

这是我的 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; */
}

有人可以帮助解释我的问题吗？一开始我以为可能是因为object-fit: contain，但似乎我的猜测是错误的

这是截图：

Answer 1

我建议使用带有背景图片的 div，这样您就可以控制列表的响应速度。执行该更改几乎不需要任何内容​​。

你需要把你的img标签改成div

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

你的 CSS

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

我用这个做了一个codepen。希望对您有所帮助，如果您需要其他方法，可以告诉我。

Answer 2

您是否尝试过使用内联 css 更改图像大小？比如<img src="url" width="specified with in px or %">