动态图像大小调整

我正在创建一组跨越我网站上页面宽度的图像。通常情况下，这样可以，但是，由于我允许页面动态调整大小，因此图像伸展（或压缩）并且变得有点失真。动态图像大小调整

有没有人知道一种方式来本质上，只是创建窗口的图像调整大小，而图像静坐在下面？

如果你想要我的问题的例子，你可以去here。

来源

2013-03-01 aprohl5

尝试设置你的图片，我假设在一个包装，以IMG {显示：块;宽度：15％;身高：自动;作为一个起点？ – sheriffderek 2013-03-01 07:38:39

我只是调整您的图像与批量调整大小程序。任何动态调整大小都会使速度或图像质量受损。如果你下载，重新调整大小，上传，你将永远不必担心。

来源

2013-03-01 03:30:07 irregularexpressions

如果文件非常杂乱，我想这可能会很杂乱... – irregularexpressions 2013-03-01 03:30:38

你能详细说明一下吗？ – aprohl5 2013-03-01 03:31:10

如果您可以轻松下载所有图像文件，则可以使用程序通过{file-name} - {pixel-size}。{file-extension}中的附加文件名来调整它们的大小。我的同事为我这样做，所以我不知道他使用的程序，但现在如果可以的话，我会发现。 – irregularexpressions 2013-03-01 03:32:10

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

来源

2013-03-01 07:46:32 sheriffderek

我其实不想调整图像大小。静态图像（取决于媒体查询块），顶部包装。这通过窗口到图像。窗口然后将调整大小。 – aprohl5 2013-03-01 14:44:59

动态图像大小调整

回答

相关问题