Question

这是我的HTML代码

<div id="hash-blog-section">
    <div class="container" style="position: relative;">
        <section class="page-img">
            <section class="hero">
                <h1>About Us!</h1>
                <p>
                    Dummy Data.
                </p>
            </section>
        </section>
    </div>
</div>

这是我在特定页面上使用的内部CSS

<style type="text/css" media="screen">
@media screen and (min-width: 769px)
    {
        .page-img
            {
                margin-top: 63px;
                background: url('assets/img/about.jpg') no-repeat center;
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
                display: table;
                height: 450px;
                width: 100%;
            }
        .page-img .hero
            {
                background: rgba(0,0,0,0.6);
                display: table-cell;
                text-align: center;
                vertical-align: middle;
            }
        .page-img .hero h1, .page-img .hero p
            {
                color:#ffffff;
            }
    }
@media (max-width: 768px)
    {
        #hash-blog-section .page-img
        {
            margin-top: 59px;
        }
        .page-img
            {
                background: url('assets/img/about.jpg') no-repeat center;
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
                display: table;
                height: 250px;
                width: 100%;
            }
        .page-img .hero
            {
                background: rgba(0,0,0,0.6);
                display: table-cell;
                text-align: center;
                vertical-align: middle;
            }
        .page-img .hero p, .page-img .hero h1
            {
                color:#ffffff;
            }
        .page-img .hero p
            {
                text-align: justify;
                text-align-last: center;
                padding: 5px;
                font-size: 15px;
            }
    }

我希望获得像bootstrap一样的响应式英雄形象，它不会裁剪并在调整屏幕大小时显示图像的每个像素。

问题是我在CSS background-size: cover中使用过，导致在调整大小时在某些点裁剪图像，在小屏幕上裁剪整个图像。

我也在CSS background-size: contain中使用但是使用此图像是响应式的，但是来自中心的裁剪格式;

如何实现图像的响应性？

任何帮助表示赞赏。提前谢谢。

Answer 1

使用background-size：100％100％;

＆＃13;

.page-img
        {
            margin-top: 63px;
            background: url('http://www.planwallpaper.com/static/images/6942095-abstract-background-wallpaper.jpg') no-repeat center;
            -webkit-background-size: 100% 100%;
            -moz-background-size:  100% 100%;
            -o-background-size:  100% 100%;
            background-size:  100% 100%;
            display:table;
             min-height: 450px;
          
            width: 100%;
        }
    .page-img .hero
        {
            background: rgba(0,0,0,0.6);
            display: table-cell;
            text-align: center;
            vertical-align: middle;
           
        }
    .page-img .hero h1, .page-img .hero p
        {
            color:#ffffff;
        }
@media only screen and (max-width:768px){
.page-img{
        
    margin-top: 59px;
     height: 250px;
   }
  .page-img .hero p{
     text-align: justify;
     text-align-last: center;
     padding: 5px;
     font-size: 15px;     

 }
}

＆＃13;

<div id="hash-blog-section">
  <div class="container" style="position: relative;">
        <section class="page-img">
            <section class="hero">
                <h1>About Us!</h1>
                <p>
                    Dummy Data.
                </p>
            </section>
        </section>
    </div>
</div>

＆＃13;

如何使用像bootstrap这样的css制作响应式英雄形象

1 个答案: