正方形のhtml要素内の画像のアスペクト比を維持する

これはhtml/cssでは非常に難しい問題ですが、とにかく頼んでいます。私は具体的な対応を求めています。哲学的な対応ではありません。正方形のhtml要素内の画像のアスペクト比を維持する

以下のhtmlファイルでは、「width：64px;」のみを使用した場合、画像は正しいアスペクト比で表示されますが、リスト項目は一様に配置されていません。

"width：64px; height：64px;"を使用すると、項目の区切りは正しくなりますが、画像のアスペクト比が正しくありません。

一般的な解決策は、画像を正方形内にラップすることです。私はこれを避けたい。ここで

<html> 
    <head> 
     <style type = "text/css"> 
      img { 
      width: 64px; 
      } 
     </style> 
    </head> 
    <body> 
     <ul> 
      <li> 
       <a href="foo.html"> 
        <img align="middle" style="bulletIcon" src="image1.svg"/> 
        Foo 
       </a> 
      </li> 
      <li> 
       <a href="bar.html"> 
        <img align="middle" style="bulletIcon" src="image2.svg"/> 
        Foo 
       </a> 
      </li> 
      <li> 
       <a href="bar.html"> 
        <img align="middle" style="bulletIcon" src="image2.svg"/> 
        Foo 
       </a> 
      </li> 
      <li> 
       <a href="foo.html"> 
        <img align="middle" style="bulletIcon" src="image1.svg"/> 
        Foo 
       </a> 
      </li> 
     </ul> 
    </body> 
</html>

二つの画像です。彼らは完全性のためにここにsvgですが、実際の問題はjpg/pngであり、本当に難しいです（とにかく、私はsvgビューボックスで再生できません。ここで

は

<?xml version="1.0" encoding="UTF-8"?> 
<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    width="100" height="200" 
    viewBox="0 0 100 200" 
    version="1.1"> 
<g> 
    <path d="M 10 10 L 90 10 L 90 190 L 10 190 z" 
      fill="cyan" stroke="blue" stroke-width="3" /> 
</g> 
</svg>

となりましimage2.svg image1.svgある

<?xml version="1.0" encoding="UTF-8"?> 
<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    width="200" height="100" 
    viewBox="0 0 200 100" 
    version="1.1"> 
<g> 
    <path d="M 10 10 L 190 10 L 190 90 L 10 90 z" 
      fill="cyan" stroke="blue" stroke-width="3" /> 
</g> 
</svg>

出典

2011-12-10 Calaf

あなたが探している正確な最終結果が混乱していますか？均一な間隔の画像グリッドですが、縦横比は異なりますか？ –

あなたはIE7のサポートを必要としない場合、私はあなたをお勧めしたいですテーブル行/テーブルセルを使用：http://jsfiddle.net/vRkgs/

li { 
    display:table-row; 
} 
li a { 
    display:table-cell; 
    height:100px; 
    vertical-align:middle; 
}

出典

2011-12-10 17:24:48 ptriek

リスト項目をクリック可能な領域にすると、画像と同じ高さになります。また、偶発的なクリックのトラップもあります。 – Calaf

正方形のhtml要素内の画像のアスペクト比を維持する

答えて

関連する問題