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用于使图像居中。

如何使用@media使图像适合屏幕？

1 个答案: