时间戳

首页 > 解决方案 > 如何用子图像覆盖固定大小的容器，保持全宽/高比？

javascript - 如何用子图像覆盖固定大小的容器，保持全宽/高比？

问题描述

所以我有一个 300x300 的方形容器和<img src="" />里面的图像。

我想要的是覆盖整个容器的图像，但保持其宽度/高度比。

如果它们都是横向或全纵向的，我可以通过将宽度或高度设置100%为并将高度或宽度分别设置为auto：

.container {
  border: 1px solid black;
  margin: 30px;
  display: inline-block;
  
  width: 300px;
  height: 300px;
  overflow: hidden;
}

img {
  width: 100%;
  height: auto;
}
<div class="container">
  <img src="https://images.pexels.com/photos/949587/pexels-photo-949587.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
</div>

<div class="container">
  <img src="https://yada.org/wp-content/uploads/2019/05/55846576-textured-floral-dark-blue-background-abstract-vertical-background-.jpg" />
</div>

但是是否有任何通用的HTML/CSS ONLY方法可以使其自动覆盖容器而不管方向？

注 1：内部图像不应以任何方式扭曲。它应该只符合上述规则的容器。

注2：我对一种并不暗示的方法感到好奇 background-image: url('')

标签： javascripthtmlcsssassless

解决方案

试试这个

.container {
  border: 1px solid black;
  margin: 30px;
  display: inline-block;
  
  width: 300px;
  height: 300px;
  overflow: hidden;
}

img {
 width: fit-content;
  min-height:300px;
}
<div class="container">
  <img src="https://images.pexels.com/photos/949587/pexels-photo-949587.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
</div>

<div class="container">
  <img src="https://yada.org/wp-content/uploads/2019/05/55846576-textured-floral-dark-blue-background-abstract-vertical-background-.jpg" />
</div>

推荐阅读