像图像一样缩放 div答案

【问题标题】：Scaling div like an image像图像一样缩放 div
【发布时间】：2014-05-07 01:46:47
【问题描述】：

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

反应灵敏；
“标题”可能不止一行；
有时我需要在背景中显示带有颜色的图标而不是完整图像。

这是我所期望的图像：

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

如您所见，当“图像”div 带有图标时，我无法为它设置相同的缩放比例。我的问题有什么解决办法吗？

【问题讨论】：

你可以试试.items .item .image {height: 200px}
我对你所期望的中心项目有点困惑。是否要将 80x80 缩放到大于 80x80，但不是完整的？
@AndyM 忘记尺寸。如果您看到我的代码，您会注意到图标中的height: 80%;。这是缩放，但父 div 需要与其他的大小相同。
看看这个。它使用 div 的背景图像：codepen.io/anon/pen/azGvJ。编辑：我修改了你的 html 一点点。还完全删除了边距内容 - 如有必要，请随时添加。
按照你设置 html 的方式，我不认为没有 js 是可行的

标签： html css scaling

【解决方案1】：

你可以使用一个额外的元素和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 中垂直对齐到伪元素，img 下的间隙出现在在baseline，将不再在这里。

.image 需要：

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

避免额外的white-space 并在img 已满width 时分成两行。

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

我认为这是你所例外的。

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

【讨论】：

【解决方案4】：

我假设您的图像（除图标）都具有与您的示例相同的纵横比。

在这种情况下，您可以使用 padding bottom 来保持图像容器的高度。由于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;
}

【讨论】：

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

【解决方案5】：

很简单

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

当您的“正常”宽度和高度分别为 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);

【讨论】：

好方法，但我建议绝对将“图标”放置在这种响应式容器中：codepen.io/anon/pen/lscny
如果您在服务器端管理图像尺寸，则不一定，您应该这样做

【解决方案6】：

主要是我给.items .item .image img加了一个max-height和一个min-height相同的值：

.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

【讨论】：

【解决方案7】：

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

要使用它，您可以将数据属性分配给要匹配其高度的元素，然后它会计算每个元素的高度以使它们都相同。它考虑了 padding、margin、border 和 box-sizing。

【讨论】：

【解决方案8】：

我认为您的做法是错误的，当一切都基于宽度百分比时，除非您使用 JS，否则无法知道高度，因此您需要将宽度更改为更合适的值以实现您的目标.

将您的 CSS 更改为：

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

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

【讨论】：

【解决方案9】：

这并不完全符合您的想法，但它是一个响应速度非常快的设计，我希望它会是您所需要的：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。

【讨论】：