Question

我知道从标题中提出问题有点奇怪，但是在更改轮播中图像的大小时遇到问题。不管我做了什么，图像的高度都不会改变，而是给像object-fit: cover这样的效果，我想要显示的图像的大小在width: 30vw;和height: 30vh;左右但是每次我更改width时都会起作用，但是每次更改height时都不会生效。

我有一些猜测，例如容器大小，列大小和包裹我的图像的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 %">

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

2 个答案: