1

ウィンドウのサイズを変更するときに画像を滑らかにする方法は?.

次のような HTML コードがあります。

<div class="box">
 <img src="http://demo.smooththemes.com/magazon/wp-content/uploads/2013/01/984632486_9d8ff89b63_b-642x336.jpg" />
</div>

そしてCSS：

.box {width:150px; height:60px; position:relative; overflow:hidden}
.box img{position:absolute; width:180px; height:80px; top:-10px; left:-10px}

ウィンドウのサイズが変更されたら、 (.box img): のプロパティtop:-10px; left:-10pxと属性 more : を 削除しますmin-width:100%, max-width:100%。それは私たちが持っていることを意味します:

.box img{
position:absolute;
width:180px; height:80px; min-width:100%;  
top:(removed); left:(removed)}

JavascriptまたはJqueryでどうすればよいですか。ご協力いただきありがとうございます。

4

4 に答える 4

3

jQuery または Javascript ソリューションについてはわかりませんが、純粋な CSS ソリューションが必要な場合は、おそらくCSS メディア クエリが最適です。これは、レスポンシブ Web デザインの基本概念です。CSS メディア クエリの詳細: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

于 2013-10-25T15:05:59.687 に答える