如何使移动屏幕上的旋转木马更大?

2019年6月21日 9点热度 0条评论

我想在移动设备上制作更大的旋转木马。有什么办法可以做到这一点? 当你看我的代码,你会看到手机屏幕上转盘很小: https://codepen.io/Codewife_101/pen/XeJaLR如何使移动屏幕上的旋转木马更大?

的想法是上传三张不同的图片1,2,3,我使用lorempixels只是为了显示所需的大小,但在现实生活中,我想上传3张不同的照片。由@cwanjt给出的解决方案在进行一些小调整后效果很好,但作为最终结果,我需要不同的东西。我正在考虑Bootstrap 4中的“隐藏”类。有什么想法? 我的CSS:

.carousel-inner > .item > img { min-width: 100%; width: 100%; }


===========解决方案如下:

我会在你试图完成什么来猜测,希望我在球场。您可以使用一些好的旧CSS media查询来更改img元素的网址,而不是使用两个不同的轮播。

img元素中删除src属性,并创建一个类,该类使用url(path/to/image/file)值实现content属性。

.change-img { 
     content: url(http://lorempixel.com/1600/750); 
    } 

现在创建一个媒体查询,当视口达到指定大小时将更改URL的值。

@media screen and (max-width: 700px) { 
    .change-img { 
     content: url(http://lorempixel.com/1600/1550); 
    } 
} 

将该类添加到您的img元素中。

<div class="carousel-inner"> 
     <div class="carousel-item active"> 
     <img class="d-block w-100 change-img" alt="First slide"> 
     </div> 
     ... 

我叉你codepen,并实现了这个代码,所以你可以看到它的工作。只需将浏览器的大小调整为700px,您就会看到传送带中的第一张图片的高度更高。