Html 移动和web引导转盘中图像的最佳大小

第一次尝试在我的网页中使用旋转木马时，我很难在旋转木马的每张幻灯片中放置图像

<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>

幻灯片1
幻灯片2
幻灯片3

旋转木马显示良好，可以在幻灯片之间导航良好，但我放在其中的图像：

• 当我将浏览器窗口的大小调整为较小的大小（手机大小）时，这将非常完美
• 在全尺寸的窗口上，非常模糊、过大且略微扭曲

是否有一个旋转木马图像的最佳大小，或者我是否缺少一个选项来帮助根据窗口大小缩放图像

---

谢谢

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

我的建议是查看图像文件的尺寸，如果它们确实只适用于移动设备（即，它们只有~320px宽），则可能需要查看更高分辨率的图像。显然，这在很大程度上取决于图像的来源（它们是您的文件，因此您可以导出更高分辨率的版本？还是您从internet获得的图像，在这种情况下，源网站是否提供更大的版本？）

编辑： 关于传送带的最佳尺寸，现在真的没有这样的事情，因为设备有各种形状和尺寸。您最好的选择是为不同的设备大小和分辨率提供不同大小的图像。有多种方法可以实现这一点，但是您可以在这里找到一些很好的信息：，并且您可以在web上找到许多关于此技术的教程

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

.wide{
宽度：1280px；
}
.宽img{
宽度：100%；
}

此图像将看起来是像素化的：
此图像看起来不会像素化：

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

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

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