html - 如何使css图像溢出其所在的div

Question

我在css中输入了一张图片，代码如下：

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

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

谢谢。

Answer 1

As Nelson said, overflow: hidden on your image won't help you. If you absolutely must have the container be smaller than the image inside it, you can use positioning (relative on the parent div, absolute on the image with a top and left of 0, for example) to ignore its parent's size. You'll want to use something other than % on the image, too, because the % will read off its parents size, which is counter-productive.

Or, did you mean you want the parent div to cut off the extra image?

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