带有 CSS 背景图像的纵横比 div [英] Aspect ratio divs with CSS background images

查看：22
本文介绍了带有 CSS 背景图像的纵横比 div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在 div 中有相同纵横比 (300px x 255px) 的图像，占宽度的 31%，在桌面/平板电脑上制作 3 列，然后在移动设备上制作全宽.图像在 div 内缩放到 100%，高度设置为自动.我需要将它们从 img 标签更改为背景图片

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

**HTML:**<div class="hotels"><img src="http://www.telodesign.com/test/cavallo-300.jpg" alt=""><br>这是一个标题

<div class="hotels"><img src="http://www.telodesign.com/test/cavallo-300.jpg" alt=""><br>这是一个标题

<div class="hotels"><img src="http://www.telodesign.com/test/cavallo-300.jpg" alt=""><br>这是一个标题

**CSS:**.hotels {显示:内联块；宽度:31.8%；垂直对齐:顶部；底边距:22px；}*强调文字*.hotels img {宽度:100%；高度:自动；}

有没有办法让这些图像成为背景图像，并且仍然让纵横比决定 div 的高度——允许相同的响应缩放?如果可能的话，我希望有一种方法可以在不使用 .js 的情况下做到这一点.可以只用 CSS 来完成吗?谢谢！

解决方案

您可以使用 % 设置一个 padding 取宽度以供参考以保持比例.例子 :http://codepen.io/anon/pen/vNXgJp 或 http://codepen.io/anon/pen/VvKPMM(下面的演示)

.hotels {显示:内联块；宽度:31.8%；垂直对齐:顶部；底边距:22px；背景:url(http://www.telodesign.com/test/cavallo-300.jpg) 不重复红色；背景尺寸:100% 自动；}.hotels:之前{内容: '';填充顶部:85%；向左飘浮;}

这是一个标题
<div class="hotels">这是一个标题

<div class="hotels">这是一个标题

或

.hotels {显示:内联块；宽度:31.8%；垂直对齐:顶部；底边距:22px；背景:url(http://www.telodesign.com/test/cavallo-300.jpg) 不重复红色；背景尺寸:100% 自动；}.hotels:之前{内容: '';填充顶部:85%；显示:内联块；垂直对齐:底部；左边距:-0.25em；}p{显示:内联块；宽度:100%；文本对齐:居中；背景:rgba(0, 0, 0, 0.5);边距:0；填充:1em；box-sizing: 边框框；}

<p>这是一个标题</p>
<div class="hotels">这是一个标题

<div class="hotels">这是一个标题

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>

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

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆