【问题标题】:CSS background images fit inside a empty div and be responsiveCSS 背景图像适合空的 div 并具有响应性
【发布时间】:2018-04-10 08:12:58
【问题描述】:

从后端转移到前端,我得到了一个设计,但不知道处理如何实现它的最佳方法。这将是大约 6 个或一些图像或分层。所有图片均为 1920 像素宽 * X 像素高。

我做了一个小技巧,以便您可以看到我正在处理的内容。里面也有几张图。 https://www.bootply.com/EEjlR9IaFN#

所以问题是设置图像/div 的宽度和高度会导致它延伸到引导容器之外并且它没有响应。所以这就是我被卡住的地方,我想不出一种方法来让这些图像适合这个容器并做出响应。我本来打算只使用 img 标签,但如果可以的话,我宁愿通过 css 来做

【问题讨论】:

    标签: html css


    【解决方案1】:

    你可以做一个小技巧,我学会了做同样的事情,它把一个图片放在后面作为响应,把背景放在前面。

    HTML

    <div class="element">
        <div class="background-image"></div>
        <img src="http://via.placeholder.com/1920x1080" class="image-responsive" alt="">
    </div>
    

    CSS

    .element{
      position: relative;
      display: inline-block;
    }
    .background-image{
      background-image: url('http://sharksharkshark.net/snow.png');
      background-size: cover;
      background-position: center;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
    .image-responsive{
      max-width: 100%;
    }
    

    注意:您可以播放和更改响应式背景图像的大小。这样,div 不会为空,而是会响应。

    示例https://jsfiddle.net/grg9rc7z/1/

    【讨论】:

    • 非常感谢您的意见!这是一个很棒的小工作。
    猜你喜欢
    • 2012-06-02
    • 2019-10-03
    • 2015-10-11
    • 1970-01-01
    • 1970-01-01
    • 2012-01-02
    • 2019-11-16
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多