HTML / CSS 图片调整比例

Question

我希望链接图像的大小为 800x600，并具有原始比例。链接图片的网站尺寸可以是 1000x400，例如 600x1000。

此时我将图像调整为 width=800px 并且在 class div 溢出被隐藏

<div class="cut">
<img src="www.example.de/image" width=800px>
</div>

这在图片比例为 600x1000 时有效，但在 1000x400 时无效。它如何处理每个图像尺寸？

Answer 1

如果您想要更简单的解决方案，请将图像更改为背景。

.image{
  float:left;
  width:800px;
  height:600px;
  border:1px red solid;
  background:no-repeat center center;
  background-size:100%;
}

Html 部分：

<div class="image" style="background-image:url(       
   http://www.google.com/images/srpr/logo11w.png 
);"></div>

Answer 2

我相信这就是您要找的：

.image{
    width:800px;
    height:600px;
    background:no-repeat center center;
    background-size: cover;
}

您需要以某种方式裁剪图像，因此将它们放在背景中最有意义。

HTML / CSS image resize proportion