Question

我正在尝试为仅包含文字的图像创建一个全宽度滑块。我的滑块是全宽的，但需要特定的高度（例如400px），因为它将显示为我网站的横幅。

问题是图像看起来很模糊，我不知道正确的尺寸，或者可能是防止这种情况的代码。

这就是我的html和图片的大小

 <div class="wrapper">
    <div class="full-width">
        <div class="inner">
            <div class="slide">
                <div>Lorem ipsum dolor sit amet, consectetur. <br>Curabitur molestie elit et ultricies vehicula.</div>
                <img src="http://lorempixel.com/1020/400/sports" width="1020" height="400">
            </div>
            <div class="slide">
                <div>Nullam dictum magna sapien, sed adipiscing nibh. <br>Curabitur molestie elit et ultricies vehicula.</div>
                <img src="http://lorempixel.com/1020/400/city" width="1020" height="400">
            </div>
            <div class="slide">
                <div>Donec malesuada hendrerit velit, sed consequat. <br>Curabitur molestie elit et ultricies vehicula.</div>
                <img src="http://lorempixel.com/1020/400/cats" width="1020" height="400">
            </div>
            <div class="slide">
                <div>Maecenas augue dui, rhoncus a blandit non. <br>Curabitur molestie elit et ultricies vehicula.</div>
                <img src="http://lorempixel.com/1020/400/business" width="1020" height="400">
            </div>
        </div>
        <div class="controls">
            <a href="#" class="left">&lt;</a>
            <a href="#" class="right">&gt;</a>
        </div>
        <div class="slide-nav"></div>
    </div>
</div>

至于我的css：

.full-width {
    overflow: hidden;
    position: relative;
    background: #fff;
}
.full-width,
.full-width .slide img {
    width: 100%;
}
.full-width:hover {
    background: transparent;
}
.full-width .inner {
    overflow-y: hidden;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
    filter: alpha(opacity=00);
    -moz-opacity: 0;
    opacity: 0;
}
.full-width .slide {
    float: left;
    overflow-x: hidden;
    position: relative;
}
.full-width .slide img {
    height: auto;
}
.full-width .slide div {
    color: #fff;
    position: absolute;
    padding: 0 5%;
    left: 0;
    width: 90%;
    text-align: right;
    font-size: 32px;
}
.full-width .slide div p {
    float: right;
    text-align: left;
    padding: 10px;
    margin: 0;
    background: rgba(0, 0, 0, 0.8);
}
.full-width .controls a {
    position: absolute;
    top: 50%;
    margin-top: -46px;
    display: block;
    background: rgba(0, 0, 0, 0.5);
    text-decoration: none;
    color: #fff;
    font-size: 40px;
    padding: 0 10px 2px 7px;
    line-height: 40px;
    *display: none;
}
.full-width .controls a.left {
    left: 0px;
}
.full-width .controls a.right {
    right: 0px;
}
.full-width .slide-nav {
    *display: none;
    font-size: 75px;
    margin: 0 auto;
    line-height: 50px;
    font-family: 'Helvetica', Arial, sans-serif;
}
.full-width .slide-nav span {
    cursor: pointer;
    color: #ccc;
}
.full-width .slide-nav span.current {
    color: #333;
}
.lt-ie9 .full-width p,
.lt-ie9 .full-width .controls a {
    background: url('bg-trans.png') repeat;
    _background: #333;
}

我需要知道的是，只是调整图像大小的问题虽然我已经尝试过并且没有工作或者它仍然在代码中。提前感谢您的帮助！

Answer 1

如果图像在较大尺寸下变得模糊，则需要生成尺寸为您想要覆盖的最大区域的图像。这样，当它达到最大尺寸时，质量将会很明显。

当您减小屏幕尺寸时，图像尺寸也可能会减小。根据我的经验，最好从较大的尺寸开始并缩小到较小尺寸以保持图像的清晰度，因此您应该以这种方式接近它。

如果问题是由于固定高度导致比例关闭而无法正确缩放，那么您需要生成具有正确比例的图像以支持您需要的尺寸。这很容易用像Photoshop这样的图像编辑软件完成，而不是用HTML进行调整。

如何制作全宽滑块而不会降低质量？

1 个答案: