如何在图像上同时使用 width: 100% 和 height: auto

Question

我想根据文字的高度自动调整图片的高度。

我尝试在我的图像上使用 height: auto 和 width: 100%（这对我来说似乎最有意义）但它不起作用。

我有什么

CodePen 示例：https://codepen.io/JeremyWeb/pen/wvJPboW

* {
  padding: 0;
  margin: 0;
}
.container {
  display: flex;
  align-items: flex-start;
  
  border: solid 4px red;
  padding: 5px;
}
.text {
  width: 50%;
  
  border: solid 4px black;
  padding: 5px;
}

.img-container {
  width: 50%;
  height: auto;
  max-height: 100%;
  box-sizing: border-box;
  
  border: solid 4px black;
  padding: 5px;
}
.img {
  height: auto;
  width: 100%;
  object-fit: cover;
}

<div class="container">
  <p class="text">Simultaneously we had a problem with prisoner drunkenness that we couldn’t figure out. I mean , the guards searched cells multiple times to no avail, that we couldn’t figure out.</p>
  <div class="img-container">
    <img class="img" src="https://images.unsplash.com/photo-1621166856483-1725976c4e21?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max"/>
  </div>
</div>

我想要的

如果可能，在 HTML/CSS 原版中。谢谢。

Answer 1

我用 javascript 解决了你的问题。你可以试试我的解决方案-

CSS

.img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

JS

imgDiv = document.getElementsByClassName('img-container')[0];
textHeight = document.getElementsByClassName('text')[0].offsetHeight;
imgDiv.style.height = textHeight + 'px';

工作 fiddle - https://jsfiddle.net/os9ht6fe/

Answer 2

实现此目的的一种方法是将图像作为背景放置在文本元素的伪元素之后。这样你肯定会得到相同的高度。

此代码段使用 CSS calc 函数计算出所需的尺寸并将图像设置为按要求覆盖。

* {
  padding: 0;
  margin: 0;
}
.container {
  --ppx: 5px; /* padding */
  --bpx: 4px; /* border */
  display: flex;
  align-items: flex-start;
  
  border: solid var(--bpx) red;
  padding: var(--ppx);  
}

.text {
  width: 50%; 
  border: solid var(--bpx) black;
  padding: var(--ppx);  
  position: relative;
}

.text::after {
  position: absolute;
  background-image: url(https://images.unsplash.com/photo-1621166856483-1725976c4e21?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max);
  background-size: cover;
  background-repeat: no-repeat no-repeat;
  background-position: center center;
  content: '';
  top: calc(var(--bpx) * -1);
  left: calc(100% + var(--bpx) + var(--ppx));
  width: calc(100% - (4 * var(--bpx)) - (7 * var(--ppx)));
  height: calc(100% - (2 * var(--ppx)));
  border: solid var(--bpx) black;
  padding: var(--ppx);
}

<div class="container">
  <p class="text">Simultaneously we had a problem with prisoner drunkenness that we couldn’t figure out. I mean , the guards searched cells multiple times to no avail, that we couldn’t figure out.</p>
</div>

图像水平和垂直居中。显然，如果需要，可以更改。如果 padding/border 值在主容器和文本元素之间不同，则可以在计算中定义和使用更多 CSS 变量。

我不确定图像周围的填充。那是必需的吗？如果是这样，则需要进一步计算，而且我们可能无法利用掩护的便利性。（或者我们引入两个伪元素以允许它们的大小不同）。如果需要请告诉我。

Answer 3

根据 Haworth 的方法，另一种方法是在空白 div 上使用背景图像并使用 min-height 属性.

.container {
  display: flex;
}
.text {
  width: 50%;
}

.img-container {
  width: 50%;
  min-height: 100%;
  background-image: url("https://images.unsplash.com/photo-1621166856483-1725976c4e21?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max");
  background-size: cover;
  background-position: center;
}

<div class="container">
  <p class="text">Simultaneously we had a problem with prisoner drunkenness that we couldn’t figure out. I mean , the guards searched cells multiple times to no avail, that we couldn’t figure out.</p>
  <div class="img-container"></div>
</div>

如何在图像上同时使用 width: 100% 和 height: auto

How to use both width: 100% and height: auto on an image

html

css

height

width

我有什么

我想要的