无法将图像放入 div 内的可变尺寸

Question

我尝试创建自定义类，分配了最大宽度、最大高度、宽度、高度，但其中 none 有效。我在 React 中映射了一组图像，它们的大小可以变化。因此对于每张地图我都有-

<div className="slider">
<img src="www..."> // All attributes
</div>

SCSS:

    .slider {
    width:700px;
    height:487px;
    display: block;
}

我试过max-width:100%, max-width:100%, same with px, object-fit, etc. 好像没什么用，大图溢出，小图div 出现在顶部并且不可点击后。

Answer 1

这是一个超级简单的示例，说明您正在努力实现我在评论中承诺的目标。（抱歉来晚了）

<html>
<head>
    <style>
    
        .container:
        {
            width:100%;
            display: flex;
            border : 1px solid black;
        }
        
        .slider
        {
            float : left;
            width:400px;
            height:300px;
            display: block;
            border: 1px solid black;
            margin-right : 20px;
        }
        
        img
        {
            width:100%;
            height:100%;
        }
        
    </style>
</head>
<body>
    <div class="container">
        <div class="slider">
            <a href="#"><img src="https://i.kinja-img.com/gawker-media/image/upload/s--G-sdBgNR--/c_scale,f_auto,fl_progressive,q_80,w_800/z7jcryloxjedsztssw39.jpg"></a>
        </div>
        <div class="slider">
            <a href="#"><img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"></a>
        </div>
        <div class="slider">
            <a href="#"><img src="https://images.unsplash.com/photo-1533450718592-29d45635f0a9?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8anBnfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&w=1000&q=80"></a>
        </div>
    </div>

</body>
</html>

我测试了它：您应该看到 3 个大小相同的图像（滑块大小）。我还为您制作了一个 JSFiddle： JSFiddle Online Example

无法将图像放入 div 内的可变尺寸

Not able to fit image for variable dimension inside div

html

css

sass