Question

标题大部分都是这样说的。我的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

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

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

Answer 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/

Answer 4

此演示显示.warp元素不会溢出＆＃34;图像＆＃34;，但它会被＆＃34;图像＆＃扩展34 ;.主要变化是：

添加默认样式
.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

<强>段

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

CSS图像扩展超过父div大小

4 个答案: