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

我有一个div元素，我希望其中的图像缩放到父对象的全宽，但是由于某些原因，它没有占据全宽。我可以使用对象匹配：封面；但我不想裁剪图像，我想让它填满父对象的空间。我还想缩放它，使它始终保持正方形，所以它始终以相等的正方形缩放。我有点困惑，为什么它不占用父母的容器。它似乎希望保持其纵横比，但我希望它通过其高度和宽度属性拉伸到父容器

html:

---

这是因为图像已达到相对于

div

的最大高度。我的意思是，在一个400px正方形的div中，一个300px宽，400px高的图像，在这种情况下，如果你在图像中放置一个100%的宽度，它的最大宽度是300px，如果你不想调整它的大小

更新 “object fit:contain”使图像适合其按比例可用的空间，如果要保持其比例并填充整个空间，请使用“object fit:cover”

看看这个

---

您是否尝试查看

背景尺寸：封面样式？然后，您还可以使用
背景位置：居中来定位图像
但你当然可以拉伸图像，使其超出纵横比的范围，并填充父容器。是的，但我认为你希望完整地显示图像，而不是裁剪或类似的内容。但是你可以在图像中使用“position:absolute”，在你的div中使用“overflow:hidden”，来获取经过容器的图像内容以进行隐藏。我将更新我的回答，它似乎仍然无法正确缩放图像，它将其切断。嗯，这里的问题来了，为父div设置一个固定高度，然后为该div设置背景图像。但是@sydo有一个更好的解决方案，即对象适合：cover。这样你仍然可以在你的图像中添加SEO友好的标签，并在搜索引擎中提供。只是澄清一下，你希望每个图像扭曲（在一个方向或其他必要的方向），使其填充一个正方形，而不剪切？我希望图像占据它的容器
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;

.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;
    } 
}