无法适应 div 内可变尺寸的图像答案

【问题标题】：Not able to fit image for variable dimension inside div无法适应 div 内可变尺寸的图像
【发布时间】：2023-03-30 02:40:01
【问题描述】：

我尝试创建自定义类，分配最大宽度、最大高度、宽度、高度，但它们都不起作用。我有一组在 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位于顶部且不可点击。

【问题讨论】：

您是否尝试将显示属性添加到图像中？喜欢显示：块？你能提供用于图像的 css 吗？
这是唯一的代码，没有图像
我认为您应该尝试在图像中添加一些 css 以使其适合 Div 父亲。并根据父亲的尺寸制作尺寸。或者将父亲的尺寸设置为“自动”以使其基于孩子。
您能详细说明一下吗？如果我知道 CSS，就不会问这个问题。抱歉，我是新手，无法调试。
好吧，基本上当你把一个标签放在另一个标签里面时，比如：会有一个层次结构，其中 tag1 是 tag2 的父亲。当您编写 css 时，您可以使用不同类型的测量（%、rem、em、cm、px），并且根据您使用的测量，它会根据父亲大小或页面大小调整项目。只需在网上查看以了解测量差异。无论如何，您必须为孩子制作一些 CSS，使其像父亲大小一样变小，或者编辑父亲 CSS 使其根据孩子大小自行调整。等我回家后，我可以给你发一个代码示例。

标签： html css sass

【解决方案1】：

这是一个超级简单的示例，说明您按照我在 cmets 中所承诺的要完成的工作。（抱歉来晚了）

<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

【讨论】：