CSS для верхнего изображения (широкий экран, мобильный просмотр) - PullRequest
Новая
       6

CSS для верхнего изображения (широкий экран, мобильный просмотр)

0 голосов
/ 17 октября 2018

У меня вопрос по поводу дизайна сайта и решения css.Нынешняя ситуация, как сейчас, у меня есть сайт 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>

1 Ответ

0 голосов
/ 17 октября 2018

Это может быть достигнуто с шириной: 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>
...