像图片一样缩放div

Question

我正在制作一个项目列表，但是有一些挑战：

• 响应式；
• "标题"可能有多行；
• 有时需要显示带有背景色的图标而不是完整的图片。

这是我期望的最终效果的图片：

而我得到的却是：http://codepen.io/caio/pen/ygkfm/

你可以看到，当"image" div中有一个图标时，我无法对其设置相同的缩放比例。有没有解决我的问题的方法？

- Caio Tarifa

---

你可以尝试使用 .items .item .image {height: 200px}。 - Nick

我对你期望中的中心项有点困惑。您是否希望将80x80缩放为大于80x80但不是全尺寸？ - Kelderic

@AndyM 不要看尺寸。如果你看我的代码，你会注意到图标中的 height: 80%;。这是缩放，但父级 div 需要与其他元素相同大小。 - Caio Tarifa

还有其他方法，但那绝对是最简单的。我看到你的顶部80x80似乎比80x80大。你实际上想要什么？缩放到高度为100还是保持80x80但居中？ - Randy

@Randy 不要考虑“80x80”的尺寸，我想按比例缩放到height: 80%，并在顶部和底部留出10%的空间（居中对齐）。 - Caio Tarifa

Answer 1

我假设你的图片（除了图标）与你的示例具有相同的宽高比。

在这种情况下，你可以使用padding-bottom来保持图像容器的高度。由于padding-bottom是根据容器的宽度计算的，因此无论内容如何它都会保持其宽高比（你将不得不使用position:absolute;定位内容，以便它不会改变容器的尺寸）。

这里有一个演示，展示了你可以做什么。很抱歉我不熟悉CodePen

我还添加了另一个容器来使图标水平居中。

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.items {
    margin: 50px auto 0;
    width: 90%;
    *zoom: 1;
}
.items:before, .items:after {
    content:" ";
    display: table;
}
.items:after {
    clear: both;
}
.items .item {
    border: 1px solid #ddd;
    float: left;
    width: 32%;
}
.items .item:nth-child(3n+2) {
    margin: 0 2%;
}
.items .item .image {
    background: #eee;
    padding-bottom:50%;
    position:relative;
}
.items .item .image .img_in{
    position:absolute;
    width:100%;
    height:100%;
    text-align:center;
}
.items .item .image img {
    display: block;
    width: 100%;
    height:100%;
}
.items .item .image img.icon {
    height: 80%;
    margin:0 auto;
    position: relative;
    top: 10%;
    width: auto;
}
.items .item .title {
    margin: 0;
    padding: 20px;
}

- web-tiki

---

一个非常清晰的答案，尤其是完美的代码块格式和正确的代码。 - Jamie

Answer 2

很简单

将以下内容添加到.items .item .image

当您拥有200像素和100像素的“普通”宽度和高度时，50％代表宽度的50％（200 * 50％= 100）

{
    height: 0;
    padding-bottom: 50%;
}

点击此处查看代码示例。

编辑

您可以使用 SCSS 的 percentage 函数：
padding-bottom: percentage(100px / 200px);

- yunzen

---

不错的方法，但我建议将“图标”放在响应式容器中的绝对位置：http://codepen.io/anon/pen/lscny - Ilya Streltsyn

如果您在服务器端管理图像尺寸，那么就不一定需要这样做。而这是您应该做的。 - yunzen

Answer 3

这不完全是您所想要的，但这是一个非常响应式的设计，我认为这正是您需要的： http://codepen.io/anon/pen/DwudI 主要容器的纵横比可能需要保持不变。然后图像将缩放至高度至少为80％，宽度和高度均不超过100％。创建div的纵横比的方法是使用这个有趣的“padding-top”技巧。当你调整屏幕大小时，div的宽度会改变，导致高度也会随之改变（纵横比）。因此，如果您缩小尺寸，则最终div会变得比图像尺寸更小，这将导致200x100填充整个div。

因此，如果您希望图像填充div，则必须（A）大于div并且（B）与div具有相同的纵横比。

您提到标题可能包含多行：现在新行在下方。如果您希望文本“向上浮动”，那么这并不太难。只需在标题上使用position:absolute; bottom:0px，并确保.item具有position:relative。

- Randy

Answer 4

我认为你的做法有误，如果一切都基于宽度百分比，那么除非使用JS，否则无法知道高度，因此你需要将宽度更改为更合适的值以实现你的目标。

将你的CSS更改为：

.icon {
    margin: 0 auto;
    padding: 5% 0;
    width: 40%;
}

并且它将看起来更像你想要的样子。我更新了你的CodePen

- Amir5000

Answer 5

我想这就是你期望的内容。

演示

HTML

  <a href="#" class="item">
    <div class="image">
      <div><img src="http://placehold.it/200x100"></div>
    </div>
    <h4 class="title">Hi. I'm a title.</h4>
  </a>

  <a href="#" class="item">
    <div class="image">
      <div><img src="http://placehold.it/80x80" class="icon"></div>
    </div>
    <h4 class="title">Hi. I'm a title.</h4>
  </a>

  <a href="#" class="item">
    <div class="image">
      <div><img src="http://placehold.it/200x100"></div>
    </div>
    <h4 class="title">Hi. I'm a title.</h4>
  </a>
</div>

SCSS

* { @include box-sizing(border-box); }

.items {
  margin: 50px auto 0;
  width: 90%;
  @include clearfix;

  .item {
    border: 1px solid #ddd;
    float: left;
    width: 32%;
    &:nth-child(3n+2) { margin: 0 2%; }

    .image {
      background: #eee;
      min-height:100px;
      max-height:100px;
      display:table;
      width:100%;

      &> div {

      display:table-cell;
      text-align:center;
      vertical-align:middle;
      }

      img {
        max-width:100%;
        height:100%;
        margin:0 auto;
        &.icon {
          height: 80%;
          margin: 0 auto;
          position: relative;
          top: 10%;
          width: auto;
        }
      }
    }

    .title {
      margin: 0;
      padding: 20px;
    }
  }
}

- Jeyarathnem Jeyachanthuru

Answer 6

我宁愿使用那些实用类，因为自从发现它们以来，我经常使用它们，基本上将它们嵌入到我写的每个CSS中。整洁，易于阅读，并且易于嵌入HTML。

这个小集合的类允许您在元素上拥有比例宽度/高度大小。 这里是演示 http://siebennull.com/equal_width_height.html 这里是解释文章: http://www.mademyday.de/css-height-equals-width-with-pure-css.html 当然要感谢发现这个技巧的人 :) CSS

.box{
    position: relative;
    width: 50%;     /* desired width */
}
.box:before{
    content: "";
    display: block;
    padding-top: 100%;  /* initial ratio of 1:1*/
}

.content{
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
/* Other ratios */
.ratio2_1:before{
    padding-top: 50%;
}
.ratio1_2:before{
    padding-top: 200%;
}
.ratio4_3:before{
    padding-top: 75%;
}
.ratio16_9:before{
    padding-top: 56.25%;
}

HTML是一种编程语言，用于创建网页。

<div class='box'> 
    <div class='content'>Aspect ratio of 1:1</div> 
</div>
<div class='box ratio16_9'> 
    <div class='content'>Aspect ratio of 16:9</div> 
</div>

- MacK

Answer 7

主要是我给 .items .item .image img 添加了一个相同值的最大高度和最小高度：

.items .item .image img {
    display: block;
    width: 100%;
    max-height:23%;
    min-height:23%;
}

我不太确定你想要实现什么，但如果我理解正确，那么这就是你要找的代码。以下是完整代码：

HTML

<div class="items">
    <a href="#" class="item">
        <div class="image">
            <img src="http://placehold.it/200x100" />
        </div>
        <h4 class="title">Hi. I'm a title.</h4>
    </a>
    <a href="#" class="item">
        <div class="image">
            <img src="http://placehold.it/80x80" class="icon" />
        </div>
        <h4 class="title">Hi. I'm a title.</h4>
    </a>
    <a href="#" class="item">
        <div class="image">
            <img src="http://placehold.it/200x100" />
        </div>
        <h4 class="title">Hi. I'm a title.</h4>
    </a>
</div>

CSS

* {
    @include box-sizing(border-box);
}
.items {
    margin: 50px auto 0;
    width: 90%;
    @include clearfix;
}
.item {
    border: 1px solid #ddd;
    float: left;
    width: 30%;
}
.items .item .image {
    background: #eee;
}
.items .item .image img {
    display: block;
    width: 100%;
    max-height:23%;
    min-height:23%;
}
.items .item .title {
    margin: 0;
    padding: 20px;
}
.icon {
    height: 80%;
    margin: 0 auto;
    position: relative;
    top: 10%;
    width: auto;
}
.items .item:nth-child(3n+2) {
    margin: 0 2%;
}

这里有一个FIDDLE

- Karim AG

Answer 8

你可以使用额外的元素和 vertical-padding，来强制你的 div 保持与 2:1 图像相同的比例或不同。

---

演示和基本的CSS：

.image:before {
  content:'';
  display:inline-block;
  vertical-align:middle;
  padding-top:50%;/* equals 50% of width of parent */
  width:0;
  box-shadow:0 0 0 5px red;/* let's see where it stands for demo purpose */
}

---

为了在您的Codepen中使其工作： 应该恢复默认的display（inline-block），所以只需删除display:block;并垂直对齐到伪元素的中间，当在baseline上时，img下面的间隙将不再存在。

.image需要以下任一选项：

在CSS中使用font-size:0;

在HTML中，代码

在HTML中，空格应该被注释掉

以避免额外的空格和当img是full width时断开成两行。

---

我在演示中提供了另一个版本的链接，其中图像可以比所需的初始空间更大，而不会破坏布局（基于元素保持在流中的想法，没有涉及absolute定位）：EXTRA

- G-Cyrillus

Answer 9

或许你可以尝试使用这个 jQuery 库 http://brm.io/jquery-match-height/

使用它时，你需要为那些你想要匹配高度的元素分配数据属性，它会计算每个元素的高度以确保它们都相同。它会考虑到 padding、margin、border 和 box-sizing。

- JazzyP