图像未缩放到 div 元素的全宽 更新

如何解决图像未缩放到 div 元素的全宽 更新

我有一个 div 元素，我希望其中的图像可以缩放到父元素的全宽，但是由于某种原因它没有占据全宽。我可以使用 object-fit: cover;但我不想裁剪图像我希望它填满父级的空间。我也喜欢缩放它，因此它始终保持正方形，因此它始终缩放为相等的正方形。我有点困惑为什么它不占用父母的容器。它似乎想要保持其纵横比，但我希望它通过其高度和宽度属性拉伸到父容器。

html：

import React from 'react';

const ThreeGridTeaser = (props) => {

    return (
        <div className="specific-offer-container mt-0">
            <div className="three-grid-teaser-wrapper">
                <div className="three-grid-teaser-container">
                    {props.gridData.map((item,index) => (
                        <div key={index} className="three-grid-teaser-block">
                            <div className="three-grid-image-container hidden">
                                <img src={item.image} 
                                />
                            </div>
                            <div className="product-text-container hidden">
                                <ul>
                                    <li className="product-title">{item.title}</li>
                                    <li className="product-description">{item.description}</li>
                                </ul>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </div>       
    )
}

export default ThreeGridTeaser;

SASS：

.three-grid-teaser-wrapper {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
}

.three-grid-teaser-container {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    height: auto;
    display: flex;
    grid-gap: 20px;
    gap: 20px;
    @media (max-width: 1199.98px) { 
        gap: 25px;
    } 
    @media (max-width: 767.98px) { 
        width: 100%;
    } 
}
.three-grid-teaser-block {
    display: flex; 
    width: 32%;
    height: fit-content;
    @media (max-width: 1199.98px) { 
        width: 48%;
    } 
    @media (max-width: 767.98px) { 
        width:47%;
    } 
    justify-content: center;
    flex-direction: column;
}

.hover-text-underline {
    text-decoration: underline;
    text-underline-position: under;
}

.three-grid-image-container {
    height: 300px;
    @media (max-width: 1199.98px) { 
        height: 350px;
    } 
    @media (max-width: 767.98px) { 
        height: 180px;
    }    

    width: 100%;
    max-width: 100%;
    img {
        display: block;
        max-width: 100%;
        max-height: 100%;
        width: 100%;
        height: 100%;
    }
}

.product-text-container {
    ul {
        margin-top: 10px;
        padding: 0;
        li:last-child {
            padding-top: 5px;
        }
        li {
            list-style: none;

        }
    }
}

.product-title {
    font-family: $terminaDemi;
    font-size: 12px;
    @media (max-width: 767.98px) { 
        font-size: 8px;
    } 
}

.product-description {
    font-family: $Montserrat;
    font-size: 18px;
    @media (max-width: 767.98px) { 
        font-size: 12px;
    } 
}

解决方法

这是因为图像已达到相对于 div 的最大高度。我的意思是，在 400 像素的正方形 div 内有一个 300 像素宽和 400 像素高的图像，在这种情况下，如果您在图像中放置 100% 的宽度，则其宽度将达到的最大值为 300 像素，在这种情况下你不想调整它的大小。

Demonstração

更新

'object-fit:contain' 使图像适合其按比例可用的空间，如果您希望它保持其比例并填充整个空间，请使用 'object-fit:cover'

看看这个 https://jsfiddle.net/gxnvuq6s/8/

,

您是否尝试查看 K 样式？然后，您还可以使用 background-size: cover;

定位您的图像