HTML/CSS 图片调整比例

Question

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

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

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

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

Answer 1

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

像这样: http://jsfiddle.net/yp7jq0tf/

.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>