我尝试创建自定义类，分配最大宽度，最大高度，宽度，高度，但它们都不工作。我有一个数组的图像，我映射在React可以是可变大小。因此，对于每个映射，我有-
<div className="slider">
<img src="www..."> // All attributes
</div>
SCSS:
.slider {
width:700px;
height:487px;
display: block;
}
我试过max-width:100%， max-width:100%， px, object-fit等。似乎没有什么工作，对于大图像它溢出，对于小图像，它之后的div出现在顶部，是不可点击的。
这是一个超级简单的例子，你正在努力完成我在评论中承诺的。对不起，我来晚了。
<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在线示例