Question

我正在创建一组跨越我网站页面宽度的图片。通常情况下这很好，因为我允许页面动态调整大小，我的图像会拉伸（或压缩）并稍微扭曲。

有没有人知道一种基本的方法，只是为调整大小的图像创建窗口，而图像静态地位于下面？

如果您想了解我的问题示例，可以here。

Answer 1

我只想使用批量调整大小程序调整图像大小。任何动态调整大小都会使速度或图像质量受损。如果您下载，调整大小一次，上传，您将永远不必担心这一点。

Answer 2

试一试。很难说出你想要发生什么......我的意思是，在小屏幕上它不会超级酷。我建议参与一些媒体查询，但这应该向您展示您的方法的第一步。 http://jsfiddle.net/sheriffderek/NvFwe/我希望它有所帮助。

HTML

<div class="wrapper">
    <img alt="image description" src="http://placehold.it/350x300">
    <img alt="image description" src="http://placehold.it/350x300">
    <img alt="image description" src="http://placehold.it/350x300">
    <img alt="image description" src="http://placehold.it/350x300">
    <img alt="image description" src="http://placehold.it/350x300">
</div>

CSS

.wrapper {
    width: 100%;
    float: left;
    background-color: #f06;
}

.wrapper img {
    display: block;
    float: left;
    width: 15%;
    height: auto;
    margin-right: 3%;
}

动态图像大小

2 个答案: