按因子缩放图像，除非它只使用CSS访问容器

Question

假设您有一个1000px的max-width容器和一个1600px宽或800px宽或介于两者之间的img容器。目标是，仅使用HTML和CSS，始终按固定因子缩放图像，比如2，并使其宽度，直到它碰到容器的侧面。因此，在这些示例中，这些图像的宽度将分别为800px和400px(以及保留纵横比的自动高度(，并在其两侧留出空间，直到容器的大小分别调整为超过800px或400px。(数字是假设的，为了便于演示。(由于遗留的原因，img元素本身中的额外标记是不可取的。

迄今为止的尝试：

• 处理zoom属性。不利因素：仍然不受支持Firefox
• 最接近的备选方案transform: scale()表现为不同，并在文档大纲中保留原始尺寸(因此，容器的高度不会降低(
• 连接Javascript或PHP来检查图像尺寸，并使计算。不利因素：额外的标记或计算可能不需要
• 似乎不可能用srcset(也需要额外的标记(
• 也许这可以用object-fit和集装箱

这样的图像缩放现在只需CSS就可以实现跨浏览器吗？或者，除非我完全改变我的方法，否则JS/PHP处理是唯一的解决方案吗？

Answer 1

CSS网格可以在您知道宽度的情况下近似此值。调整屏幕大小以进行测试：

.container {
max-width:1000px;
margin:20px auto;
outline:2px solid;
display:grid;
justify-content: center;
/* we set the step to be width/8
for 1600px we get 200px
our image will have a width equal to N*200px:
[200px 400px 600px 800px 1000px]
*/
grid-template-columns:repeat(auto-fit,calc(var(--w)/8))
}
.container img {
grid-column:1/-1;
max-width:100%;
}

<div class="container" style="--w:1600px">
<img src="https://picsum.photos/id/1014/1600/600">
</div>
<div class="container" style="--w:1200px"> 
<!-- here will have a 150px step (150px 300px 450px 600px 750px 900px) -->
<img src="https://picsum.photos/id/1018/1200/600">
</div>

Answer 2

以下解决方案仍然需要预先计算内部容器的最大宽度(宽度*比例因子(，例如使用PHP脚本和getimagesize()，但它确实避免了修改内部容器本身的内部内容。

CSS：

#outer_container {max-width: 1000px;}
#inner_container {display: flex; margin: 0 auto;}
#inner_container > img {width: 100%;}

情况1中的HTML：

<div id="outer_container">
<div id="inner_container" style="max-width: 800px;">
<img src="image_which_is_1600px_wide.jpg">
</div>
</div>

情况2:中的HTML

<div id="outer_container">
<div id="inner_container" style="max-width: 400px;">
<img src="image_which_is_800px_wide.jpg">
</div>
</div>

这种方法的一个好处是，它可以扩展到灵活地承载不同的内部内容(不一定是img(，而无需直接修改。