2

100 px x 100 px の div 内に収まるように同じ縦横比を維持するように画像をスケーリングするにはどうすればよいでしょうか。しかし、あなたが言うことができる追加の問題は、その高さと幅を満たすように拡大または縮小したいだけだということです。たとえば、51 px x 51 px の画像がある場合、102 px x 102 px に拡大されます。ご覧のとおり、少しオーバーフローする必要がありますが、div全体を埋めています。私はすべての最大幅などを試しましたが、答えがjqueryにある場合、jqueryを知らないので少し説明が必要です。事前に感謝します

4

5 に答える 5

2

提供できるコードはありますか？

これを試してみてください：

CSS:

#container {
  width: 102px;
  height: 102px;
  padding: 0;
  margin: 0;
  background: url(../images/your-image-goes-here.png) no-repeat 0 0;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

HTML:

<div id="container">
</div>
于 2013-08-15T09:08:13.457 に答える
2

div の幅と高さを正確なサイズに設定し、画像の幅と高さを 100% に設定します。

CSS

#container {
    width: 102px;
    height: 102px;
}
#image {
    width: 100%;
    height: 100%;
}

HTML

<div id="container">
    <img id="image" src="random" />
</div>

ただし、画像の解像度には注意してください。拡大しすぎると画質が低下します。

于 2013-08-15T09:11:28.137 に答える
1

imagewrapper 内に画像 div が必要です。秘密は padding-bottom にあり、これは 2:1 の比率を指定しています。実験 ;）

#imagewrapper {
    position: relative;
    padding-bottom: 50%;
    height: 0;
}

#image { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
于 2013-08-15T09:07:54.467 に答える
0

HTML

<div class="frame">
  <!-- Image original size is 36x33 px -->
  <img src="http://www.clickworkforce.com/images/software/icon-jquery.jpg" alt="jQuery"/>
</div>

CSS

.frame {
  width: 100px;
  height: 100px;
}

jQuery

$(function() {

  var frm    = $('.frame'),
      frmImg = $('.frame img');

  frmImg.css({ height: frm.innerHeight(), width: frm.innerWidth() });

});

フィドルを見てください

于 2013-09-01T10:35:05.303 に答える
0

次のリンクを見てください。画像ストレッチに関する非常に包括的な実装です。

http://www.selbie.com/playground/aspectcorrect/aspectcorrect.htm

ブラウザーでページ ソースを開き、aspectratio.js ファイルに移動します。そこには、必要なすべてを実行する関数が 1 つだけ記述されています。

役立つことを願っています。

于 2013-08-15T09:24:33.463 に答える