Question

第一次尝试在我的网页中使用旋转木马，并且无法在旋转木马的每张幻灯片中放置图像。

<div class="carouselContainer">
        <div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
            <!-- 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>   
           <!-- Wrapper for carousel items -->
            <div class="carousel-inner">
                <div class="active item one">
                   <img src="slide1.png"/>
                    <div class="carousel-caption">
                      <h3>Slide 1</h3>  
                    </div>
                </div>
                <div class="item two">
                   <img src="slide2.png"/>
                    <div class="carousel-caption">
                      <h3>Slide 2</h3>
                    </div>
                </div>
                <div class="item three">
                   <img src="slide3.png"/>
                    <div class="carousel-caption">
                      <h3>Slide 3</h3>
                    </div>
                </div>
            </div>
            <!-- Carousel controls -->
            <a class="carousel-control left" href="#myCarousel" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="carousel-control right" href="#myCarousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div>
    </div>

旋转木马显示正常，可以在幻灯片之间导航，但我放入的图像是：

当我将浏览器窗口调整为更小的尺寸（移动尺寸）时，这是完美的
在完全大小的窗户上非常模糊，太大，并且稍微扭曲。

旋转木马的图像是否有最佳尺寸，或者我遗漏了一些关于帮助缩放窗口大小的图像的选项？

由于

Answer 1

不同尺寸的图像质量取决于图像本身的尺寸。如果您的旋转木马将其拉伸以适应任何现代桌面分辨率（目前通常高于1024），则320像素宽的图像将看起来非常像素化。

我的建议是看看你的图像文件的尺寸是多少，如果它们确实只适合移动设备（即它们只有~320px宽），你可能需要研究获得更高分辨率的图像，如果可能的话。很多这将取决于你的图像的来源，显然（它们是你的文件，所以你可以导出更高分辨率的版本？或者他们是你从互联网上获得的图像，在这种情况下，源网站提供更大的版本？）

编辑：关于旋转木马的最佳尺寸，现在确实没有这样的东西，因为设备有各种形状和尺寸。您最好的选择是为不同的设备尺寸和分辨率提供不同尺寸的图像。有多种方法可以实现这一点，但您可以在这里找到一些好的信息：http://responsiveimages.org/，您可以在网上找到许多有关此技术的教程。

以下是一些HTML和示例图像的示例：

.wide {
    width: 1280px;
}

.wide img {
    width: 100%;
}

<div class="wide">
    This image will look pixelated:
    <img src="http://lorempixel.com/300/100">
</div>
    
<div class="wide">
    This image will not look pixelated:
    <img src="http://lorempixel.com/1280/400">
</div>

Answer 2

最佳图像分辨率取决于您的网站设计，特别是滑块的宽度。如果您正在设计默认的固定宽度网站，那么您的图像宽度应为1200px宽度（默认引导程序模板宽度为1200px，无填充1170px）。

但是如果你想要一个全宽滑块（根据浏览器宽度拟合），那么我建议你找一个1920px宽度的高质量图像。因为根据statcounter.com，几乎12.7％的显示器有1920px的宽度。显然，最流行的分辨率是1367px（43.6％）。因此，如果您没有找到宽度为1920px的图像，请至少尝试使用1367px图像。

您也可以将两个图像用于两种不同的分辨率。您只需要HTML img标签上的srcset属性。

<img src="small.jpg" srcset="medium.jpg 1367w, large.jpg 1920w">

您可以在https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/

中详细了解相关信息

适用于移动设备和网络的自举轮播中图像的最佳尺寸

2 个答案: