长宽比div与CSS背景图像 [英] Aspect ratio divs with CSS background images

问题描述

我在div中占有相等宽高比（300px x 255px）的图像占宽度的31％，以在桌面/平板电脑上制作3列，然后在手机上制作全长。图像在div内缩放到100％，高度设置为auto。我需要将它们从img标签更改为背景图片。

http://codepen.io/anon/pen/yYagJd

  ** HTML：** 
< div class =hotels> 
< img src =http://www.telodesign.com/test/cavallo-300.jpgalt =>< br> 
这是一个标题
< / div> 
 
< div class =hotels> 
< img src =http://www.telodesign.com/test/cavallo-300.jpgalt =>< br> 
这是一个标题
< / div> 
 
< div class =hotels> 
< img src =http://www.telodesign.com/test/cavallo-300.jpgalt =>< br> 
这是一个标题
< / div> 
 
 ** CSS：** 
 .hotels {
 display：inline-block; 
宽度：31.8％; 
 vertical-align：top; 
 margin-bottom：22px; 
 
} 
 
 *强调文字* .hotels img {
 width：100％; 
 height：auto; 
} 
  

有没有办法让这些图片成为背景图片，还有方面比率决定了div的高度 - 允许相同的响应缩放吗？如果可能的话，我希望有一种方法可以在不使用.js的情况下执行此操作。它可以用CSS来完成吗？谢谢！

解决方案

您可以使用％来设置填充宽度作为参考以保持比例。
例如：
http://codepen.io/anon/pen/vNXgJp或 http://codepen.io/anon/pen/VvKPMM （下面的演示）

  .hotels {display：inline-block;宽度：31.8％; vertical-align：top; margin-bottom：22px;背景：url（http://www.telodesign.com/test/cavallo-300.jpg）不重复红色; background-size：100％auto;}。hotels：before {content：'';填充顶部：85％; float：left;}  

 < div class =hotels >这里有一个标题< / div>< div class =hotels>这里有一个标题< / div>< div class =hotels>这是一个标题< / div>  

或

  .hotels {display：inline-block;宽度：31.8％; vertical-align：top; margin-bottom：22px;背景：url（http://www.telodesign.com/test/cavallo-300.jpg）不重复红色; background-size：100％auto;}。hotels：before {content：'';填充顶部：85％;显示：inline-block; vertical-align：bottom; margin-left：-0.25em;} p {display：inline-block;宽度：100％; text-align：center;背景：rgba（0，0，0，0.5）;保证金：0;填充：1em; box-sizing：border-box;}  

< div类= 酒店 > < p>以下是标题< / p>< / div>< div class =hotels>这里有一个标题< / div>< div class =hotels>这是一个标题< / div>




I have images of equal aspect ratios (300px x 255px) in divs taking up ~31% of the width to make 3 columns on desktop/tablet, then full width on mobile. The images scale to 100% within the div, with the height set as auto. I need to change them from img tags to background images

http://codepen.io/anon/pen/yYagJd

**HTML:**
<div class="hotels">
    <img src="http://www.telodesign.com/test/cavallo-300.jpg" alt=""><br>
Here's a title
</div>

<div class="hotels">
    <img src="http://www.telodesign.com/test/cavallo-300.jpg" alt=""><br>
Here's a title
</div>

<div class="hotels">
    <img src="http://www.telodesign.com/test/cavallo-300.jpg" alt=""><br>
Here's a title
</div>

**CSS:**
.hotels {
    display: inline-block;
    width: 31.8%;
    vertical-align: top;
    margin-bottom: 22px;

}

*emphasized text*.hotels img {
    width: 100%;
    height: auto;
}

Is there a way to make these images background images, and still have the aspect ratio dictate the height of the div--allowing the same responsive scaling? I'm hoping there's a way to do this without using .js, if possible. Can it be done with just CSS? Thanks!

解决方案

You could use % to set a padding taking width for reference to keep ratio. example : http://codepen.io/anon/pen/vNXgJp or http://codepen.io/anon/pen/VvKPMM (demos below)

.hotels {
  display: inline-block;
  width: 31.8%;
  vertical-align: top;
  margin-bottom: 22px;
  background: url(http://www.telodesign.com/test/cavallo-300.jpg) no-repeat red;
  background-size: 100% auto;
}
.hotels:before {
  content: '';
  padding-top: 85%;
  float: left;
}

<div class="hotels">
  Here's a title</div>

<div class="hotels">
  Here's a title</div>

<div class="hotels">
  Here's a title</div>

or

.hotels {
  display: inline-block;
  width: 31.8%;
  vertical-align: top;
  margin-bottom: 22px;
  background: url(http://www.telodesign.com/test/cavallo-300.jpg) no-repeat red;
  background-size: 100% auto;
}
.hotels:before {
  content: '';
  padding-top: 85%;
  display: inline-block;
  vertical-align: bottom;
  margin-left: -0.25em;
}
p {
  display: inline-block;
  width: 100%;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  margin: 0;
  padding: 1em;
  box-sizing: border-box;
}

<div class="hotels">
  <p>Here's a title</p>
</div>

<div class="hotels">
  Here's a title</div>

<div class="hotels">
  Here's a title</div>

这篇关于长宽比div与CSS背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！