css - 什么是使图像适合 div 的好方法，类似于 pinterest 的做法？

Question

基本上，像这样简单的东西:

<div class="container">
  <img src="something.jpg" class="image">
  <div class="well">Title</div>
</div>

例如，如果 img 的最大高度可以达到 400 像素(我认为 pinterest 使它们非常适合)，您如何让它不至于 self 压缩？

.image {
  width: 100%;
  max-height: 300px;
  height: 100%;
}

Answer 1

我认为你应该只将宽度或高度设置为“100%”，另一个设置为“自动”，它将保持图像比例。

HTML:

<div class="container">
  <img src="xxx.jpg" class="image">
</div>
<div class="well">Title</div>

CSS:

.container {
  height:400px;
  width:100%;
  overflow: hidden;
  text-align: center;
}
.image {
  width: auto;
  height: 100%;
}

另一种方法是使用 background-image 属性轻松控制背景大小。

HTML:

    <div class="container"></div>
    <div class="well">Title</div>

CSS:

    .container {
      height:400px;
      width:100%;
      background-image: url("xxx.jpg");
      background-size: cover;
      background-position: center;
    }