0

div内に画像があり、画像を含むdivの幅100％または高さ100％に縮小したい。ここで提案されているように、max-heightとmax-widthの両方を100％に設定してみました。これでもオーバーフローが発生します（overflow：hiddenで画像をトリミングしたくありません）。画像はdiv内に浮かんでいます。

これを達成することは可能ですか？私のコードは以下の通りです。私は何か間違ったことをしていますか？

div#_content div#_thumbnails div {
  padding:2px;
  display:inline-block;
  min-width:10%;
  max-width:25%;
  min-height:80px;
  max-height:125px;
  text-align:center;
}
div#_content div#_thumbnails img {
  display:inline;
  padding:2px;
  float:left;
  max-height:100%;
  max-width:100%;
}

以下のJavaScriptでは、imgsはURLのリストです。サムネイルは、コンテナが配置されるマザーディブです。

for (i in imgs) {
  if (imgs[i]) {
    var new_img = document.createElement('IMG'),
      container = document.createElement('DIV')
    new_img.setAttribute('alt', "image"+i.toString())
    new_img.setAttribute('src', imgs[i])
    container.appendChild(new_img)
    thumbnails.appendChild(container)
  }
}

これがばかげた質問ではないことを願っていますが、私は検索しましたが、見つけた提案はどれもうまくいきませんでした。

4

2 に答える 2

1

してみてください：

<style type="text/css">
#thumbContainer {
    position:relative;
}
.thumb{
    position:relative;
    float:left;
    width: 100%;
    height: auto;
}
.thumb img {
    background-size: cover !important;
    width: 100%;
    height: auto;
}
</style>

<div id="thumbContainer">
    <div class="thumb"><img src="http://3.bp.blogspot.com/_ABFjy8u6h9s/TStw8-_4j1I/AAAAAAAACE0/cKm4ZiIFilk/s1600/NATUREZA+01.jpg" /></div>
    <div class="thumb"><img src="http://3.bp.blogspot.com/_ABFjy8u6h9s/TStw8-_4j1I/AAAAAAAACE0/cKm4ZiIFilk/s1600/NATUREZA+01.jpg" /></div>
    <div class="thumb"><img src="http://3.bp.blogspot.com/_ABFjy8u6h9s/TStw8-_4j1I/AAAAAAAACE0/cKm4ZiIFilk/s1600/NATUREZA+01.jpg" /></div>
</div>

（http://jsfiddle.net/ahjjg/）

Adittional、私はの背景を提案します<img>。

于 2012-04-10T01:15:52.863 に答える
0

PHPを使用している場合、これはあなたにとって最良の解決策です

http://www.welancers.com/perfect-solution-for-image-resizing-based-on-width-height/

于 2012-04-10T00:57:05.707 に答える