Question

我对网站设计和CSS解决方案有疑问。就目前的现状而言，我有一个以onepager为主题的wordpress网站。在顶部，我有一张图像，其中的标题几乎全屏显示。所以我的问题是关于该图像和不同的浏览器/窗口大小。

例如，对于我当前的屏幕尺寸，它调整得很好，但是应该如此，但是如果我在大/宽屏幕上打开，图像的宽度会增加，但是这样，我看不到是什么较低时，图像变宽，与宽度的比例相同，因此在高度上我只能看到图像的一小部分，这是合乎逻辑的。另一个问题是该图片的移动视图。

基本上是示例：jthemes.org/wp/uniset/demo9

尝试在宽屏幕上打开并查看结果...
尝试其他尺寸...
在移动设备上打开..

解决此问题的最佳方法是什么，最常见和最佳的方法是什么？我该怎么办？

摘要： CSS：

.vc_custom_1525172849260 {
    margin-bottom: 0px !important;
    padding-top: 240px !important;
    padding-bottom: 180px !important;
    background-image: url(http://jthemes.org/wp/uniset/demo9/wp-content/uploads/sites/9/2018/05/hero-8.jpg?id=230) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;

HTML

<div data-vc-full-width="true" data-vc-full-width-init="true" class="vc_row wpb_row vc_row-fluid bg-scroll vc_custom_1525172849260 vc_row-has-fill vc_row-o-content-middle vc_row-flex" style="position: relative; left: 0px; box-sizing: border-box; width: 1165px; padding-left: 0px; padding-right: 0px;"><div class="wpb_column vc_column_container vc_col-sm-10"><div class="vc_column-inner vc_custom_1519925212553"><div class="wpb_wrapper">                
        <div class="title-subtitle-wrap text-left ">

            <!-- Title -->  
            <h3 style="font-size:110px; color: #222222">FIND YOUR TIPPING POINT</h3>
                        <!-- Big Text -->
                <p class="p-lg text-left" style="color: #333333">Nullam tempor sapien, eget gravida. Donec enim ipsum porta justo integer at odio velna vitae auctor integer congue magna impedit magna viverra</p>            
                    </div>
        </div></div></div><div class="wpb_column vc_column_container vc_col-sm-2"><div class="vc_column-inner "><div class="wpb_wrapper"></div></div></div></div>

Answer 1

只需使用宽度即可实现：100％CSS样式。或者只是将其包装在div标签中。

img {
  width: 100%;
}

<img src="http://jthemes.org/wp/uniset/demo9/wp-content/uploads/sites/9/2018/05/banner-3-img.png">

<div>
  <img src="http://jthemes.org/wp/uniset/demo9/wp-content/uploads/sites/9/2018/05/banner-3-img.png">
</div>

顶部图片的CSS（宽屏，移动视图）

1 个答案: