0

画像を含む div 要素がいくつかあり、すべての画像の高さは 100% に設定され、幅が計算されます。高さは正常に機能しますが、親 div には画像の実際の幅があり、計算された幅よりも大きくなります。そのため、画像間にギャップが生じます。表示されている画像の幅 (ファイル自体の幅ではありません) を持つように div を作成するにはどうすればよいですか? それはhtml/CSSだけで解決できますか？

HTML:

<table>
   <tr>
      <td align-"center" valign="middle" style="background:#000;">
         <div class="scrollable"> 
            <div class="items">
               <div>
                  <img style="height:100%;" src="001.png"> 
               </div>
            </div>
         </div>
      </td>
   </tr>
</table>

CSS:

table {
    width: 100%; 
    height: 100%; 
    padding: 0; 
    margin: 0; 
    border-collapse: collapse; 
    border: 0;
}

td {
    width: 100%; 
    height: 100%; 
    padding: 0; 
    border: 0;
}

.scrollable {
    position: relative; 
    overflow: hidden;
    width: 100%; 
    height: 100%; 
    max-height: 1000px;
}

.scrollable .items {
    width: 25000px; 
    height: 100%; 
    position: absolute;
}

.items {float: center;}

.items div {
    float: left; 
    width: auto;
    padding: 0;
    margin: 0;
}

何か案は？タンクス！

4

1 に答える 1

0

はい、これは CSS と HTML だけで解決できます。CSS で画像の幅を設定できます。最初に画像要素に次のような id<img id="img1" style="height:100%;" src="001.png">を与えてから、CSS: で画像に希望の幅を与えます#img1{ width:150px; }。

また

親 div の幅を、画像の幅が超えることができない境界幅に設定してからwidth:100%、CSS で画像の幅を設定できます。

編集:新しい JSbin: を考えると、画像間の黒いスペースを削除するにはstyle="height:100%"、各画像から削除するだけです。ブラウザがウィンドウの高さの 100% を維持するために画像をわずかに縮小しているため、黒いスペースが作成されています。これが役立つことを願っています。ここに jsBin があります: http://jsbin.com/kupaqukizu/1/edit?html,css,js,output

于 2015-03-29T16:27:37.493 に答える