问题：

Question

_{（类似的问题已经在stackoverflow上问过，但是这个问题有更多的限制，例如特定的最大宽度，最大高度，所需的特定高度和宽度，以及没有布局偏移。）}

问题：

我想要一个具有以下约束的响应式图像：

最大宽度：100％，因此它不会向右溢出，并且在减小屏幕宽度时具有响应能力。
最大高度：200像素，这样可以减小大图像的渲染尺寸。
height和width html属性，以便浏览器可以预先计算所需的图像尺寸，以便在加载图像时，布局不会在图像旁边/下方移动/移动元素。（以减少cumulative layout shift。）
图像长宽比应保持1：1
在图像周围不应创建多余的边距
图像应使用纯html img标签而不是css背景图像呈现
图片的尺寸不应大于原始尺寸

如何使用CSS实现呢？

（如果CSS无法实现这一点，那么可能使用JavaScript？）

我尝试过的

我尝试了几种CSS功能，例如object-fit和max-width：100％等，但是在尝试修复另一个约束时，我总是遇到至少一个约束失败。例如，当屏幕尺寸减小时，对象适合会在图像尺寸减小时为其创建边距/填充，就好像图像边框没有减小一样。下面的代码对此进行了演示：

https://codepen.io/Devabc/pen/mdVvyKq

/* Should appear to the right of the Wombat */

.beside {
  float: left;
  background-color: lightgreen;
  border: 1px solid;
  height: 200px;
  width: 100px;
}


/* Should appear below the Wombat */

.below {
  background-color: red;
  border: 1px solid;
  width: 100px;
  height: 300px;
  clear: both;
}

img {
  display: block;
  float: left;
  max-width: 100%;
  max-height: 200px;
  border: 1px solid;
  
  /* Without this, aspect ratio is not normal. 
But with this, it creates an unwanted margin. */
  object-fit: scale-down;
  object-position: left;
}

<img 
height="533" 
width="799" 
src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Vombatus_ursinus_-Maria_Island_National_Park.jpg/800px-Vombatus_ursinus_-Maria_Island_National_Park.jpg" 
/>

<div class="beside">This text should be directly to the right of the Wombat, without any margin between the Wombat and this text.</div>

<div class="below">This text should be directly below the Wombat, without any margin between this and the Wombat. 
The dimensions of the original Wombat img are:
width: 799px, height: 533px</div>

（绿色文本应位于“袋熊”的右侧，没有边距。但是对象匹配会导致填充/边距与原始图像的长度一起出现。）

即使在响应性设计很重要的情况下，如今这些要求不应该过多，但CSS似乎几乎不可能做到这一点。

如何使用HTML / CSS修复此问题？

Answer 1

如果CSS无法实现这一点，那么可能使用JavaScript？

我不会用JavaScript解决这个问题。我了解您想在width元素上使用height和img来减轻内容布局的变化，但是在这种情况下，因为您的max-height必须为200px在图像上，这会导致在natural width较大的图像上出现问题。您在绿色文字和Wombat之间看到的空间不是margin或padding，而是您定义为799px的实际content width。
< br /> 您可以通过准备一些要呈现给用户的数据来解决此问题。准备width就像您期望的图像width一样。在这种情况下，width=799是不现实的，因为由于max-height:200px的限制，图像的响应程度不会达到与height=533相同的程度。使用静态测量（例如单位像素）的全部要点是，您已经声明此X元素将仅占用Y空间。

<img 
    height="200" 
    width="300" 
    src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Vombatus_ursinus_-Maria_Island_National_Park.jpg/800px-Vombatus_ursinus_-Maria_Island_National_Park.jpg" 
/>

Answer 2

如果您的问题是您的网页/网站没有响应，那么我建议您使用{strong> width 和{{ 1}}表示高度，而不是vw或vh表示您的所有元素，包括 border 和 font-size 它将帮助您使网页/网站具有响应性。

它应该可以解决您的问题，但是如果在评论中没有让我知道，我会尽力帮助您。

CSS：使用最大宽度和最大高度

问题：

我尝试过的

2 个答案: