CSS 图像扩展超过父 div 大小答案

【问题标题】：CSS Image expanding over parent div sizeCSS 图像扩展超过父 div 大小
【发布时间】：2023-03-15 14:57:01
【问题描述】：

标题说明了大部分内容。我的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 大小。Fiddle

【问题讨论】：

所以？这是默认行为。如果您不希望这样，您可以通过将overflow; hidden 添加到父级来“隐藏”，或者您可以使图像具有百分比高度。
考虑 CSS object-fit 属性：stackoverflow.com/a/34301817/3597276
@Michael_B 我不想使用它，因为 IE 和 Edge 不支持它
object-fit 的 IE 解决方法：HERE 和 HERE

标签： html css

【解决方案1】：

当您拥有的图像大于分区时 .. 图像无法放入其中。所以你还必须为图像设置宽度和高度

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

【讨论】：

【解决方案2】：

您的div.wrap 元素的宽度和高度分别设置为500px 和200px。这个宽度和高度的纵横比是5:2。另一方面，您的图像具有2048x1376 的分辨率，其纵横比转换为64:43。如果我们缩小它，我们会得到5:3.35。

比较5:2 和5:3.35 这两个纵横比时，您会看到图像比div.wrap 元素高。

我可以想到三种不同的方法来解决这个问题

首先，您可以拉伸图像以适应：JSFiddle

.wrap {
  width: 500px;
  height: 200px;
  background: red;
}
.wrap * {
  width: 100%;
  height: 100%;
}

其次，调整图片以保持纵横比：JSFiddle

.s-inner > figure > img {
  box-sizing: border-box;
  max-width: 100%;
  max-height: 100%;
  height: 200px; // add height of the .wrap
}

第三，你隐藏图像的溢出部分并重新定位图像：JSFiddle

.wrap {
  max-width: 500px;
  max-height: 200px;
  background: red;
  overflow: hidden; // hide overflow
}
.s-inner > figure > img {
  box-sizing: border-box;
  max-width: 100%;
  max-height: 100%;
  margin-top: calc(-335.938px + 200px); // reposition the image
}

【讨论】：

【解决方案3】：

尝试将overflow: hidden 添加到您的wrap div 并将width: 100%; 添加到子div。

css:

.wrap{
  max-width:500px;
  max-height:200px;
  background:red;
  overflow: hidden;
}
.s-inner{
    position: relative;
    display: -webkit-flex;
    display: flex;
    height: auto;
    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;
        width: 100%;
        height: auto;
    }

小提琴：https://jsfiddle.net/3uvpt3ta/7/

【讨论】：

【解决方案4】：

这个演示显示.warp 元素没有被“图像”溢出，但是它被“图像”扩展了。主要变化是：

添加了默认样式
.wrap 是 display: table
.s-inner 是 display: table-cell
.s-inner 删除 flex 属性
<img> 已删除。
图像src 现在分配给figure background-image
background-size: contain 也被添加到 figure 中。这类似于object: fit。使用contain 的值，图像不会被剪裁，也不会在调整大小时变形。事实上，它试图保持原来的比例。
figure就是100vw x 100vh，基本上如果不包含，它会从屏幕的一个边缘横向和纵向扩展到另一边缘。
添加了标题和图标，因为它看起来不错。
尝试调整它的大小，它是响应式的，但核心元素（<body> 中的元素）并不完全依赖于百分比长度。诀窍是将宽度和高度明确设置为absolute 和/或intrinsic 测量值。然后沿着相对和绝对之间交替的层向下工作。
以display为基础也不错，可以是经典的block和inline-block，或者flex，或者我最喜欢的table。如果与您决定使用的display 的类型一致，那么它的混淆就会越少。

Fiddle

片段

/* Defaults ~~~~~~~~~~~~~~~*/

html {
  box-sizing: border-box;
  font: 500 16px/1.428 'Raleway';
  height: 100vh;
  width: 100vw;
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
body {
  position: relative;
  font-size: 1rem;
  line-height: 1;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Modified OP ~~~~~~~~~~~~~~~~~~~~*/

.wrap {
  display: table;
  max-width: 500px;
  max-height: 200px;
  background: orange;
}
.s-inner {
  display: table-cell;
  width: 100%;
}
.s-inner > figure {
  width: 100vw;
  height: 100vh;
  background-image: url(http://www.trbimg.com/img-4fad2af0/turbine/hc-american-school-for-the-deaf-20120510-006);
  background-repeat: no-repeat;
  background-size: contain;
}
figure:before {
  content: '?';
  font-size: 3em;
}
.title {
  font-variant: small-caps;
  color: black;
  margin: 10px 30px 0 35%;
  float: right;
}

<link href='https://fonts.googleapis.com/css?family=Raleway:600' rel='stylesheet'/>

<main class="wrap">
  <section class="s-inner">
    <figure>
      <figcaption class="title">
        <h1>
   HC American School for the Deaf
    </h1>
      </figcaption>
    </figure>
  </section>
</main>

【讨论】：