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

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有了这个。希望对您有所帮助，如果您需要另一种方法，可以告诉我。