Как разместить изображение на экране с помощью @media?

Question

У меня есть титульная страница с изображением, которое отлично смотрится в мобильном представлении, но как только оно попадает на рабочий стол, оно берет на себя ответственность взорвать себя в 2 или 3 раза по сравнению с оригинальным размером, так что только часть изображения

Что вызывает это и как исправить, пожалуйста?

Я имею в виду, даже в мобильном телефоне, хотя он выглядит там хорошо, взрывается сам, без инструкций от меня, я мог бы добавить и дляказалось бы, без причины.

HTML:

<div id="content" class="main-container">
<section class="content-area  pt0 ">
<div id="main" class="" role="main">
<div id="shapely_home_parallax-3" class="widget 
shapely_home_parallax">     <section class="cover fullscreen 
image-bg">
<div class="parallax-window fullscreen" data-parallax="scroll" data- 
image-src="https://adsler.co.uk/wp-- 
content/uploads/2019/06/IMG_20190622_134847-1.jpg" data-ios- 
fix="true" data-over-scroll-fix="true" data-android-fix="true">
<div class="align-transform">
<div class="row">
<div class="top-parallax-section">
<div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 text- 
center">                            
<div class="mb32"></div><a class="btn btn-lg btn-white" 
href="https://adsler.co.uk/wp-user-test-dashboard-2/awpcp-place- 
ad/">Post</a><a class="btn btn-lg btn-filled" 
href="https://adsler.co.uk/search-adsler/">Search</a>                                
</div>

Страница: https://adsler.co.uk

Пытался:

@media (min-width: 768px) {.image-bg {background-size: cover; position: relative;}} 

Ничего.

Answer 1

Для управления положением / размером изображения добавьте следующее правило css:

img.parallax-slider {
    width: 75% !important;
    height: auto !important; /* maintain aspect ratio */
    top: 0 !important; /* position from page top, use negative value to move image up */
    left: 50% !important; /* align left side of image with the center of page */
    transform: translateX(-50%) !important; /* move image left by half it's width */
}

Обратите внимание, что вам нужно использовать !important для переопределения стиля элемента, назначенного плагином.left и transform используются для центрирования изображения, если вы решите отображать пробелы по сторонам.