如何在调整浏览器大小时更改幻灯片图片？

我不知道如何改变幻灯片的图像时，我去手机屏幕的大小。我用BootStrap建立我的第一个网站。它在电脑上看起来不错，但当我改变屏幕尺寸时，整个图像的比例很小，当屏幕尺寸发生变化时，是否有任何想法替换幻灯片中的显示图像？我需要改变它的CSS代码，感谢如何在调整浏览器大小时更改幻灯片图片？

<!DOCTYPE html> 
<html lang="en"> 
<head></head> 

<!-- Carousel 
================================================== --> 
<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
    </ol> 
    <div class="carousel-inner" role="listbox"> 
     <div class="item active"> 
      <img class="first-slide" src="image/N-house000.jpg" alt="First slide"> 
      <div class="container"> 
       <div class="carousel-caption"> 
        <h1>IntopHome LTD</h1> 
        <p><a class="btn btn-lg btn-primary" href="contact.html" role="button">CONTACT US</p></a> 
       </div> 
      </div> 
     </div> 
    </div> 
</html>

来源

2016-12-15 Shiliang Fang

你不需要'body'标签？ –

嗨，那里，它有身体标记，我只是复制我的code.not全部的一部分。 –

使用媒体查询并更改不同分辨率下图像滑块的高度宽度，或者可以使用bootstrap/MDL作为响应式设计。 –

你必须使用css media queries如果必须只用CSS处理它，

我对你的建议是初始化2个不同的滑块页，其中包含高移动显示图像，在你的CSS查询简单地隐藏一个用于台式机和移动设备上展示一个，

CSS例子：

@media only screen and (max-width: 990px) { 
    .desktop_slider{display:none; visibility: hidden;} 
    .mobile_slider{display:block; visibility: visible;} 
}

来源

2016-12-15 11:24:54

Awsome，谢谢！ –

如何在调整浏览器大小时更改幻灯片图片？

回答

相关问题