html - 动态图像大小

Question

我正在创建一组跨越我网站页面宽度的图像。但是，通常这会很好，因为我允许页面动态调整大小，我的图像会拉伸（或压缩）并有点失真。

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

如果你想要我的问题的一个例子，你可以去这里。

Answer 1

试试这个。很难说你想要发生什么......我的意思是，在小屏幕上它不会很酷。我建议涉及一些媒体查询，但这应该向您展示您的方法的第一步。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%;
}

Answer 2

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