image - flexslider 画像をレスポンシブにするにはどうすればよいですか?

Question

現在、 width: 100% を使用して、画像をウィンドウサイズに合わせて拡大縮小しています。

画像を縮小して歪まないようにする方法を知りたいです。

Answer 1

画像の幅を width: 100% に変更し、高さを height:auto に変更して、知る必要がある人のためにこれを修正しました。

例えば。

img {
    width: 100%;
    height:auto;
}

編集：

画像の幅がコンテナーよりも大きくならないようにするため

img {
    max-width: 100%;
    width: 100%;
    height:auto;
}

Answer 2

私はこれを行いましたが、うまくいきました。ホームページに大きなスライダーが欲しくなかったので、サイズを変更したところ、反応しなくなったことがわかりました。いくつかのコードを追加してテストしましたが、機能しないものもあれば、機能するものもありました。最後に、これはスライダーのサイズを変更して応答性を維持するためのコードです!!

.flexslider {max-width: 700px; margin: -20; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img { 
 display: block;
 max-width: 100%; height: auto; margin: - auto;
}

 }