Question

我不知道当我去手机大小的屏幕时如何更改幻灯片的图像。我使用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>

Answer 1

如果必须只使用css，

，则必须使用css media queries

我的建议是将2个不同的滑块初始化为页面，其中包含用于移动显示的较高图像，在CSS查询中只需隐藏一个用于桌面并显示移动设备，

CSS示例：

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

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

1 个答案: