Css 溢出：隐藏不在转换比例上工作_Css_Flexbox_Overflow_Css Transforms

Css 溢出：隐藏不在转换比例上工作

css

Css 溢出：隐藏不在转换比例上工作,css,flexbox,overflow,css-transforms,Css,Flexbox,Overflow,Css Transforms,我试图放大我的缩略图，但不让它超出300px x 300px区域。我已经阅读了这里的问题，但仍然无法让我的问题解决这就是它看起来的样子：这就是我想要它的样子：您必须更改一些html结构和css，如下所示 /*======================================= 美术馆部分动画 =======================================*/ .flexContainer{ 显示器：flex；柔性包装：包装；宽度：1032px；保证金：自

我试图放大我的缩略图，但不让它超出300px x 300px区域。我已经阅读了这里的问题，但仍然无法让我的问题解决

这就是它看起来的样子：

这就是我想要它的样子：

您必须更改一些html结构和css，如下所示

/*=======================================
美术馆部分动画
=======================================*/
.flexContainer{
显示器：flex；
柔性包装：包装；
宽度：1032px；
保证金：自动；
背景色：淡蓝色；
溢出：隐藏；
}
.图像{
利润率：15px；
宽度：300px；
高度：300px；
溢出：隐藏；
边框：5px黑色实心；
}
/* ================================= 
照片叠加过渡
==================================== */
img{
转变：转变；
变换原点：50%50%；
}
img：悬停{
转换：比例（1.1）；
}

如果您同时拥有这两个代码，那么问题是什么…？您是否试图通过Flex box实现相同的效果？谢谢！你能给我指点方向，让我了解为什么布局必须是它工作的方式吗？

<body>
    <div class=flexContainer>
        <div class="images">
            <img src="http://via.placeholder.com/300x300"/>
        </div>
        <div class="images">
            <img src="http://via.placeholder.com/300x300"/>
        </div>

.flexContainer {
    display: flex;
    flex-wrap: wrap;
    width: 1032px;
    margin: auto;
    background-color: DodgerBlue;
    overflow: hidden;
 }

.images {
    margin: 15px;
    width: 300px;
    height: 300px;

}

.flexContainer img {
    border: 5px black solid;
}