100％高度或100％宽度 [英] 100% height OR 100% width

问题描述

如何制作图像，以便无论大小如何都以固定大小填充图块并保持其长宽比?例如，如果图像足够宽，则在隐藏了溢出的情况下它会扩展到也足够高，反之亦然.到目前为止，这就是我要做的，但是如果图像需要调整为100％的高度，它的宽度不会超出框的范围，并且会使图像失真.

How do I make it so an image fills a tile with a set size no matter what and keep its aspect ratio? For instance, if an image is wide enough it expands to also be tall enough with the overflow hidden and vice versa. This is what I have so far but if an image needs to be adjust for 100% height it doesn't expand the width beyond the box and leaves the image distorted.

.box{
   width: 100px;
   height: 100px;
   overflow: hidden;
}
.image{
   min-width: 100%;
   min-height: 100%;
}

<div class="box">
  <img class="image" src="/img.jpg">
</div>

推荐答案

我放弃了并在div中使用了以下CSS:

I gave up and used the following CSS in my div:

background: url("dynamic-img.jpg") repeat scroll center center / cover  rgb(191, 30, 46)

这篇关于100％高度或100％宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！