Question

我在css中输入了一个图像，其代码如下：

.imgtemp { 
          float:right; 
          top:0px; 
          left:0px; 
          overflow:visible; 
          width:100%;
        }

我还将div标签添加到页面中以便显示，但由于设计原因，图像比div宽。我怎样才能让它溢出div来使其正确。

感谢。

Answer 1

正如尼尔森所说，溢出：隐藏在你的形象上对你无济于事。如果绝对必须使容器小于其中的图像，则可以使用定位（相对于父div，例如图像上的绝对值，顶部和左侧为0）来忽略其父级的大小。你也想在图像上使用％以外的东西，因为％会读取它的父母大小，这会适得其反。

或者，你的意思是你想要父div来切断额外的图像吗？

Answer 2

您应该将overflow:visible放在div上，而不是放在图像上。

Answer 3

.contact__section{ //  your container
    width: 100%;
    display: block;
    overflow: hidden; // hide in case your XL image is too high to keep other sections of page neat
}
.contact__flexbox{
    position: relative; // you may not need it
    display: block; // for mobile size, or none; if not want to display on mobile
    width: 1100px; // our container width
    max-width: 100%; // for mobile
    margin: 0 auto; // center it on page
    @include tablet{ // My personal media query, replace with yours for tablet + size
        display: flex;
        align-items: center;
        justify-content:space-evenly;
    }
}
.contact__image-xl{
    position: relative; // important
    display: flex;
    flex:1; // make de 2 columns same size for a split in the middle of screen
    // No need: overflow: visible;
    img{
        // VERY IMPORTANT:
        max-width: 1000%!important;

        position: absolute;
        right: 0; // if your image is on left, otherwise: left:0;
        width: 1200px; // your image at the size you want it to display
    }
}

如何让css图像溢出它的div

3 个答案: