在任意大小的图像周围添加边框，包括响应[html/css/js]

我知道有很多类似性质的问题，但没有一个能找到这个我能找到的特定用例（包括youtube和Google）——如果这是一个微不足道的问题，请道歉，并提前感谢您的帮助

我试图得到一个有固定边框的响应图像。也就是说，图像将填充其所在的容器，直到其最大长度或宽度，保持纵横比，但容器将具有任意尺寸，因为它将根据视口/屏幕进行缩放。因此，想象一个矩形中的正方形图像在垂直高度到水平宽度之间变化，缩放图像直到它到达任意一个边界

我尝试过的每个解决方案几乎都会使图像的“容器”获得背景，这意味着在一个方向上，它看起来很好，但当拉伸到另一个方向时，它会向外延伸

我尝试过的事情：

创建div容器并设置背景色。不工作，因为我不能（或不知道如何）强迫它适合照片的纵横比，而不仅仅是填充父容器

使用bg clour和padding/margin将img属性直接定位在父类下。这基本上表现为#1

添加针对img属性的阴影，无褪色或偏移，白色。行为就像1

尝试使用边框定位图像-似乎没有实现图像定位

试图找出一种方法来缩放它，而不是背景图像-类似于1在约束容器大小与图像宽高比方面的问题

2-4：（组合在一起，在尝试每个单独的选项时明显注释掉）：

问题可能是我如何实现缩放限制。下面是我正在使用的代码，它似乎是有效的：

.photo{
  margin-left: auto;
  margin-right: auto;
  height: 100%;
  width: auto;
  object-fit: contain;
}

这显然解决了一个方向，但在另一个方向上给了我不想要的行为。我当然可以翻转高度/宽度自动部分，但只是给出了问题的“双重”。此外，使用仅包含将不起作用，因为我希望图像最大限度地占用容器空间。对象拟合填充不符合目标，因为它会影响纵横比。Object fit封面将裁剪图像。至少我已经了解到HTML/CSS处理图像的方式是考虑它们在自己的对象内…（假设这是正确的）

我缺乏CSS方面的经验，这其中有什么我没有的吗

我几乎想要的是一个CSS子选择器，它将容器维度映射到子（img）纵横比。我希望我不必进入JS来做这件事，但如果是这样的话，就这样吧

---

不管怎样，谢谢你的建议。如果有必要的话，我正试图使用swiper.js在“幻灯片”中实现这一点。

您可以在css中使用背景大小封面！我想你已经知道如何保持长方体的纵横比，无论是宽度还是高度。如果您知道这些方法，那么您可以使用媒体查询来应用这两种方法中的任何一种，具体取决于屏幕是横向还是portait。@tacoshy-问题是图像的大小/纵横比是任意的。如果他们都是方方面面，那就行了，但我不认为媒体查询会在已知方面之外起作用。（TBH，它们不是完全任意的，但我将有最低的纵向和横向比率，所以…我认为是同一个问题？@AlePlo-酷，另一个可以使用的工具-我将研究我是否可以让它以这种方式工作。不过，我确实看到另一个问答建议，背景图像对于SEO来说不太理想。如果你需要将它们作为img标签，你也许可以找到一个解决办法，将图像包装在一个隐藏溢出的容器中，但我认为这将更难实现，而SEO的好处我不知道是否真的值得。

.photo{
  margin-left: auto;
  margin-right: auto;
  height: 100%;
  width: auto;
  object-fit: contain;
}