並排移動圖像移動到手機上的垂直圖像

我有一個div，它具有4個並排的圖像以及圖像上的一些文字。在移動時，不要縮小圖像和文字，而要將圖像疊放在一起。但是，當我嘗試去做時，我被卡住了。並排移動圖像移動到手機上的垂直圖像

我玩的風格，並沒有能夠做到這一點。

我用一些測試圖像創建了這個JS提琴（https://jsfiddle.net/deadendstreet/pwrd78gv/），但是，只有一個圖像顯示出來。這在我的網站上不是問題。另外，我粘貼下面的樣式。

謝謝你的幫助。

#highlights { 
width: 100%; 
max-height: 200px; 
background: rgba(0, 0, 0, 0.89); 
overflow: hidden; 
position: absolute; 
bottom: 200px; 
} 
#featured-boxes-light { 
width: 100%; 
max-height: 200px; 
background: rgba(255, 255, 255, 0.03) 
} 
#highlights .swiper-slide { 
position: relative; 
cursor: pointer; 
} 
#highlights .title-top, #featured-boxes .title-bottom { 
background: rgba(0, 0, 0, 0.48); 
width: 100%; 
position: absolute; 
padding: 10px 20px 10px; 
color: white; 
font-size: 22px; 
text-align: left; 
/* margin-top: -36px; */ 
left: 0%; 
/* margin-left: -35%; */ 
line-height: 22px; 
bottom: 0px; 
height: auto; 
z-index: 1; 
} 
.swiper-wrapper { 
max-height: 200px; 
} 
.fb-header { 
display: block; 
font-size: 16px; 
color: rgb(255, 0, 0); 
font-weight: 600; 
letter-spacing: 2px; 
text-shadow: 0px 0px 3px black; 
opacity: .9; 
width: 25%; 
} 
.fb-title .title-top:hover { 
opacity: .8 !important; 
} 
.fb-zoom { 
max-width: 350px; 
width: 100%; 
height: 200px; 
overflow: hidden; 
} 
.fb-zoom img { 
max-width: 350px; 
width: 100%; 
height: auto; 
} 
.fb-swipe-left, .fb-swipe-right { 
height: 195px; 
width: 40px; 
position: absolute; 
top: 0px; 
z-index: 999; 
background-size: contain !important; 
-webkit-transition: all 0.4s; 
-moz-transition: all 0.4s; 
-ms-transition: all 0.4s; 
-o-transition: all 0.4s; 
transition: all 0.4s; 
cursor: pointer; 
} 
.fb-swipe-left:hover, .fb-swipe-right:hover { 
background-color: rgba(255, 255, 255, 0.33); 
} 
.fb-swipe-left { 
background: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-left-128.png") center center no-repeat rgba(255,255,255,0.25); 
left: -40px; 
} 
.fb-swipe-left.fb-hovered { 
left: 0; 
} 
.fb-swipe-right { 
background: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png") center center no-repeat rgba(255,255,255,0.25); 
right: -40px; 
} 
.fb-swipe-right.fb-hovered { 
right: 0; 
} 
.swiper-scrollbar { 
height: 5px; 
position: absolute !important; 
width: 100%; 
bottom: 0px; 
margin: 0 auto; 
z-index: 999; 
background: rgba(255, 255, 255, 0.14) !important; 
} 
.swiper-scrollbar-drag { 
background: rgba(255, 255, 255, 0.7) !important; 

}

來源

2016-05-14 happinessiskey

https://jsfiddle.net/hon8trkz/

添加此媒體查詢（寬度進行調整，以您的要求）：

@media screen and (max-width: 600px;) } 
    .fb-zoom, .fb-zoom img { 
    max-width: none; 
    height: auto; 
    } 
}

它設置圖像的寬度和其下方600像素的屏幕，以100％的容器寬度。 height: auto;是可選的 - 不知道你是否想要。

來源

2016-05-14 20:39:07 Johannes

正如@Johannes所說，你可以添加一個具有特定行爲的媒體查詢來獲得想要的結果。

他的查詢工作正常，我只是糾正了HTML結構的最後一張照片：

<div class="swiper-slide"> 
    <a class="fb-title" href=""> 
     <div class="title-top"> 
     test     </div> 
     <div class="fb-zoom"> 
     <img width="400" height="224" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSkbgZKjIRwUafNM8Nbo5BwoaJWk7byZbD82LOqVAwku6jC1DM_Ig" class="attachment-small" alt="100 Songs from SXSW mixtape" />      
     </div> 
    </a><!--/.swiper-wrapper --> 
    </div><!--/#swiper-featured -->

Fiddle here

來源

2016-05-14 20:53:31

並排移動圖像移動到手機上的垂直圖像

回答

相關問題