Question

我有一个以下HTML代码，其中的图像纯粹响应。

<div class="flexslider js-fullheight">
        <ul class="slides">
        <li  style="background-image: url(images/slide_1.jpg); width:100%;" border="0" alt="Null">
            <div class="overlay-gradient"></div>
            <div class="container">
                <div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
                    <div class="slider-text-inner">
                        <h2>Start Your Startup With This Template</h2>
                        <p><a href="#" class="btn btn-primary btn-lg">Get started</a></p>
                    </div>
                </div>
            </div>
        </li>
        <li style="background-image: url(images/slide_3.jpg);">
            <div class="container">
                <div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
                    <div class="slider-text-inner">
                        <h2>Take Your Business To The Next Level</h2>
                        <p><a href="#" class="btn btn-primary btn-lg">Get started</a></p>
                    </div>
                </div>
            </div>
        </li>
        <li style="background-image: url(images/slide_2.jpg);">
            <div class="container">
                <div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
                    <div class="slider-text-inner">
                        <h2>We Think Different That Others Can't</h2>
                        <p><a href="#" class="btn btn-primary btn-lg">Get started</a></p>
                    </div>
                </div>
            </div>
        </li>
        </ul>
    </div>

在此，slide_1.jpg图像具有响应性。我想要的是，我想用我的实际图像替换这个图像。

我尝试通过提供width:100%来更改图像，但图像仍然被拉伸。任何想法，如何使图像响应。

更新

并且css位于

之下

#fh5co-hero .flexslider .slider-text > .slider-text-inner {
  display: table-cell;
  vertical-align: middle;
  min-height: 700px;
}
#fh5co-hero .flexslider .slider-text > .slider-text-inner h2 {
  font-size: 70px;
  font-weight: 400;
  color: #fff;
}
@media screen and (max-width: 768px) {
  #fh5co-hero .flexslider .slider-text > .slider-text-inner h2 {
    font-size: 40px;
  }
}
#fh5co-hero .flexslider .slider-text > .slider-text-inner .fh5co-lead {
  font-size: 20px;
  color: #fff;
}

<div class="flexslider js-fullheight">
                <ul class="slides">
                    <li style="background-image: url(/images/slide_1.jpg);">
                    <div class="overlay-gradient"></div>
                    <div class="container">
                    <div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
                    <div class="slider-text-inner">
                    <h2>Start Your Startup With This Template</h2>
                    <!--<p><a href="#" class="btn btn-primary btn-lg">Get started</a></p>-->
                    </div>
                    </div>
                    </div>
                    </li>
                    <li style="background-image: url(images/slide_3.jpg);">
                        <div class="container">
                            <div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
                                <div class="slider-text-inner">
                                    <h2>Take Your Business To The Next Level</h2>
                                    <!--<p><a href="#" class="btn btn-primary btn-lg">Get started</a></p>-->
                                </div>
                            </div>
                        </div>
                    </li>
                    <li style="background-image: url(images/slide_2.jpg);">
                        <div class="container">
                            <div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
                                <div class="slider-text-inner">
                                    <h2>We Think Different That Others Can't</h2>
                                    <!--<p><a href="#" class="btn btn-primary btn-lg">Get started</a></p>-->
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>

Answer 1

如果仅将宽度更改为100％，则会拉伸其中的图像。尝试将height:auto;添加到内联CSS中，以便图像正确缩放。

如果不起作用，请尝试将background-image属性替换为：

background: url(images/slide_1.jpg) no-repeat center center;
background-size: cover;

如何在呼叫时使图像响应

1 个答案: