html - 如何在 CSS 中使图像具有响应性，以便它可以与其相邻文本在高度上同样对齐？

Question

我在标签中有一张图片，<img>标签中有一些文字<p>。两者都包含在一个<div>.

虽然在调整浏览器窗口大小时图像会响应并以相等的纵横比调整大小，但是有一个烦人的问题是，当调整浏览器窗口大小时，由于文本被换成了下面的多行，图像的高度变小到它的相邻文本。它使我的网站设计难看。如何在调整大小的窗口中使图像的高度与其相邻文本相等。

请注意，当浏览器窗口的大小调整为小于 768 像素时，图像和文本块都接收 100% 的宽度，并且它们相互堆叠。

请查看下面给出的屏幕截图以清楚地了解我的问题。在第一张图片中，您可以看到图片下方的空白区域 - 这是我的问题。我想将图像拉伸到文本最后一行的基线，但保持纵横比不变。

目前的问题：

我的要求：

编辑

请注意，在标签中包含 HTMLwidth和height属性<img>并不重要。如果编写了与图像尺寸相关的 CSS 规则，它不会更改图像的尺寸。

此外width，height如果内容来自WYSIWYG. 如果我不是制作此内容的人，这将是不可行和不可能的。

* {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  margin:0;
}

img {
  max-width:100%;
  height:auto;
}

.container {
  max-width:1200px;
  border:1px solid #eeeeee;
  margin:0 auto;
}

.col {
  width:100%;
  float:left;
  padding:15px;
}

.container {
  content:"";
  display:table;
  clear:both;
}

@media only screen and (min-width: 768px) {
  .left {
    width:25%;
  }

  .right {
    width:75%;
  }
}

<div class="container">
<div class="col left">
    <img src="images/nature.jpg" width="640" height="480" />
  </div>
<div class="col right">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec ligula ut tortor convallis ultricies sed vel leo. Nullam congue ligula sed lectus viverra rhoncus. Nullam tincidunt nibh sed ligula maximus faucibus. Nunc eu mauris purus. Vestibulum et nisl ut massa finibus laoreet in sit amet tortor. Suspendisse non leo quam. Ut consectetur dictum nibh vel vehicula. Vestibulum lobortis purus quam, id mattis purus sollicitudin volutpat. Maecenas ut libero in nisi egestas ornare nec ac lectus. Nullam urna nisi, rhoncus vitae viverra mattis, imperdiet nec velit. Aenean libero elit, luctus id maximus at, congue eget tortor. Nunc ultricies, augue eget facilisis luctus, nisl nibh aliquet libero, id ullamcorper ligula leo auctor ex.</p>
  </div>
</div>

标签： htmlcss

Answer 1

这是 flex/width/object-fit 的想法：

.container {
  max-width: 1200px;
  border: 1px solid #eeeeee;
  margin: 0 auto;
}

.left img {
  max-width: 100%;
}

@media only screen and (min-width: 768px) {
  .container {
    display: flex;
  }
  .left {
    position: relative;
    flex: 0 0 30%;
  }
  .left img {
    position: absolute;    /* take it of the flow, so it doesn't stretch the parent if    col right is shorter */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .right {
    flex: 0 0 75%;
  }
}

<div class="container">
  <div class="col left">
    <img src="https://picsum.photos/id/1041/640/480" width="640" height="480" />
  </div>
  <div class="col right">
    <h1>PLZ, run in fullpage mode , then resized</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec ligula ut tortor convallis ultricies sed vel leo. Nullam congue ligula sed lectus viverra rhoncus. Nullam tincidunt nibh sed ligula maximus faucibus. Nunc eu mauris purus. Vestibulum
      et nisl ut massa finibus laoreet in sit amet tortor. Suspendisse non leo quam. Ut consectetur dictum nibh vel vehicula. Vestibulum lobortis purus quam, id mattis purus sollicitudin volutpat. Maecenas ut libero in nisi egestas ornare nec ac lectus.
      Nullam urna nisi, rhoncus vitae viverra mattis, imperdiet nec velit. Aenean libero elit, luctus id maximus at, congue eget tortor. Nunc ultricies, augue eget facilisis luctus, nisl nibh aliquet libero, id ullamcorper ligula leo auctor ex.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec ligula ut tortor convallis ultricies sed vel leo. Nullam congue ligula sed lectus viverra rhoncus. Nullam tincidunt nibh sed ligula maximus faucibus. Nunc eu mauris purus. Vestibulum
      et nisl ut massa finibus laoreet in sit amet tortor. Suspendisse non leo quam. Ut consectetur dictum nibh vel vehicula. Vestibulum lobortis purus quam, id mattis purus sollicitudin volutpat.</p>
  </div>
</div>

显示：表格版本：

.container {
  max-width: 1200px;
  border: 1px solid #eeeeee;
  margin: 0 auto;
}

.left img {
  max-width: 100%;
}

@media only screen and (min-width: 768px) {
  .container {
    display: table;
    width: 100%;
    table-)layout: fixed;
  }
  .left {
    display: table-cell;
    width: 25%;
    position: relative;
    flex: 0 0 30%;
  }
  .left img {
    position: absolute;
    /* take it of the flow, so it doesn't stretch the parent if    col right is shorter */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .right {
    padding-left: 1em;
  }
}

<div class="container">
  <div class="col left">
    <img src="https://picsum.photos/id/1041/640/480" width="640" height="480" />
  </div>
  <div class="col right">
    <h1>PLZ, run in fullpage mode , then resized</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec ligula ut tortor convallis ultricies sed vel leo. Nullam congue ligula sed lectus viverra rhoncus. Nullam tincidunt nibh sed ligula maximus faucibus. Nunc eu mauris purus. Vestibulum
      et nisl ut massa finibus laoreet in sit amet tortor. Suspendisse non leo quam. Ut consectetur dictum nibh vel vehicula. Vestibulum lobortis purus quam, id mattis purus sollicitudin volutpat. Maecenas ut libero in nisi egestas ornare nec ac lectus.
      Nullam urna nisi, rhoncus vitae viverra mattis, imperdiet nec velit. Aenean libero elit, luctus id maximus at, congue eget tortor. Nunc ultricies, augue eget facilisis luctus, nisl nibh aliquet libero, id ullamcorper ligula leo auctor ex.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec ligula ut tortor convallis ultricies sed vel leo. Nullam congue ligula sed lectus viverra rhoncus. Nullam tincidunt nibh sed ligula maximus faucibus. Nunc eu mauris purus. Vestibulum
      et nisl ut massa finibus laoreet in sit amet tortor. Suspendisse non leo quam. Ut consectetur dictum nibh vel vehicula. Vestibulum lobortis purus quam, id mattis purus sollicitudin volutpat.</p>
  </div>
</div>