html - 動的画像サイズ

Question

Web サイトのページの幅にまたがる一連の画像の作成に取り組んでいます。通常はこれで問題ありませんが、ページのサイズを動的に変更できるようにしているため、画像が伸縮 (または圧縮) して少し歪んでしまいます。

画像が静的に下にある間に、サイズを変更する画像用のウィンドウを作成するだけの基本的な方法を知っている人はいますか?

私の問題の例が必要な場合は、ここにアクセスできます。

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

バッチサイズ変更プログラムで画像のサイズを変更するだけです。動的にサイズを変更すると、速度や画質が低下します。ダウンロードして一度リサイズしてアップロードすれば、そんな心配はいりません。