Question

我正在做一个项目列表，但它有一些挑战：

响应;
“标题”可能有多行;
有时我需要在背景中显示带有颜色的图标而不是完整图像。

这是我所期望的形象： Final result expected

我得到了什么：http://codepen.io/caio/pen/ygkfm/ What I have

正如您所看到的，当图标具有图标时，我无法将相同的缩放设置为“图像”div。我的问题有解决办法吗？

Answer 1

我假设你的图像（exept图标）都具有与你的例子中相同的宽高比。

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

以下是 demo 显示您可以执行的操作。抱歉我没有进入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;
}

Answer 2

很容易

添加以下.items .item .image

当你有一个正常的＆＃39;宽度和高度分别为200和100像素，然后50％代表宽度的50％（200 * 50％= 100）

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

http://codepen.io/HerrSerker/pen/HhjKo?editors=110

修改

您可以使用SCSS percentage功能：
padding-bottom: percentage(100px / 200px);

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。

Answer 4

我认为你的方法是错误的，当一切都基于宽度百分比时，除非你使用JS，否则没有办法知道高度，所以你需要将宽度改为更适合你的目标

将CSS更改为：

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

它看起来更像你想要的。我更新了您的CodePen

Answer 5

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

要使用它，您需要将数据属性分配给要匹配其高度的元素，然后计算要生成的每个元素的高度，它们都是相同的。它考虑了填充，边距，边框和框大小。

Answer 6

主要是，我向.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

Answer 7

你可以使用额外的元素和vertical-padding 来强制你的div保持相同的比例它是否有2：1的图像。

DEMO 和基本的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 */
}

为了让这个在您的代码中工作：

img应该回到默认的display（inline-block），所以只需删除display:block;并在middle中垂直对齐到伪元素<{1}}上显示的img下的差距将不再存在。

baseline需要：

在CSS .image
在HTML中，代码font-size:0;不应缩进
在HTML中，空白区域应注释<div><img src="..

以避免额外的<div><img src="...，并在white-space已满img时中断2行。

我在演示中链接了另一个版本，其中图像可能比初始空间大而不破坏布局（基于元素保留在流中的想法，不涉及width定位）： {{ 3}}

Answer 8

我认为这就是你的意思。

Demo

<强> 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;
    }
  }
}

Answer 9

我宁愿去使用那些我发现自己使用的实用程序类，因为我发现它们，基本上将它们嵌入到我写的每个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>

像图像一样缩放div

9 个答案:

修改