CSS图片扩展到父div大小 [英] CSS Image expanding over parent div size

问题描述

标题说明了大部分内容.我的html:

The title says most of it. My html:

<div class="wrap">
 <div class="s-inner">
  <figure>
   <img>
  </figure>
 </div>
</div>

CSS:

.wrap{
 max-width:500px;
 max-height:200px;
 background:red;
 }
.s-inner{
position: relative;
margin: inherit;
padding:inherit;
display: -webkit-flex;
display: flex;
max-height: 100%;
max-width: 100%;
box-sizing:inherit;
margin:auto;
}
/*            Inside             */
.s-inner > figure{
  display: block;
  margin: 0 auto 0 auto;
  box-sizing: border-box;
}
  .s-inner > figure > img{
    box-sizing: border-box;
    max-width: 100%;
    max-height: 100%;
}

如果检查.wrap div，您会注意到图像弹出并且大于div，如何固定图像以缩放.wrap div大小.

If you inspect the .wrap div you will notice that the image is popping out and being larger than the div,how that be fixed for image to scale the .wrap div size.Fiddle

推荐答案

当您拥有的图像大于分隔区域时，..图像无法容纳在其中.所以还必须设置图片的宽度和高度

when the image you have is bigger than the division .. image cannot fit in it. so you have to set width and height for the image also

  .s-inner > figure > img {
     height: 196px;
     box-sizing: border-box;
     max-width: 100%;
     max-height: 100%;
     width: 500px;
       }

或响应方式

 .s-inner > figure > img {
height: 100%;
box-sizing: border-box;
max-width: 100%;
max-height: 100%;
width: 100%;
 }

这篇关于CSS图片扩展到父div大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！