26

img液体の中に要素がありますdiv。そのimgはmax-height100％に設定されています。したがって、画像がdivよりも高い場合は、divと同じ高さにレンダリングする必要があります。

.pngファイルの元のサイズは200x200です。私のブラウザでは、divは284x123と表示されます。したがって、アスペクト比を維持するために、imgは123x123でレンダリングする必要があります。

ただし、imgはdivの境界を超えており、200x200と表示されます。なぜこれが起こっているのか理解できないようです。

これはChromeで発生していますが、Firefoxでは発生していません（前回試しました）。

ここで現在の状態を確認できます（http://paginas.fe.up.pt/~ei07171/test/）。写真の左側にカーソルを合わせると、灰色の矢印が表示されます。これは、私が話している.pngです。右側の矢印はSVGファイルであり、正しく機能します。

編集：別のjsfiddle（http://jsfiddle.net/dcastro/3Ygwp/1/）を作成しました。ここで、imgのmax-heightが正しく機能しているようです。プロジェクトで何が原因であるかがわかりません。動作しません。

4

5 に答える 5

57

私はそれを考え出した。要素の最大高さが機能するには、その親の1つにheight属性が定義されている必要があります（パーセンテージではなく、pxなどの固定単位で表示されます）。

w3c仕様から：

パーセンテージは、生成されたボックスを含むブロックの高さを基準にして計算されます。含むブロックの高さが明示的に指定されておらず（つまり、コンテンツの高さに依存する）、この要素が絶対的に配置されていない場合、パーセンテージ値は「0」（「min-height」の場合）または「none」として扱われます。 （「max-height」の場合）。

imgの親には固定の高さが定義されていないため、代わりにimgをmax-widthに制限する必要がありました。

編集：また、webkitは少し文字通り仕様を取りすぎているようです：https ：//stackoverflow.com/a/3808701/857807

私はそのスレッドで提示された回避策を使用し、を使用しましたposition: absolute; max-height: 100%; top: 0。

于 2013-01-28T04:32:37.013 に答える
9

私もこれにぶつかりvh、CSSの単位を使用して、たとえばmax-height: 5vh;ビューポートの高さの5％のように、さまざまなブラウザー間で一貫した高さを得ることができました。

于 2016-12-18T00:37:56.527 に答える
1

それでもコンテナをpxではなく％ベースにしたい場合は、コンテナdisplay: flexと画像を作成できます

object-fit: contain;
max-width: 100%;
于 2020-11-24T11:01:34.127 に答える
0

幅と高さの属性を画像に追加してみてください

また、ブラウザのレンダリングに役立つようにHTMLに自然な寸法を設定します。

HTML

<img src="img/mywine/2high.png" width="123px" height="123px">

CSS

  img{
       max-width: 100%
       height: auto;
    }
于 2013-01-28T03:17:25.273 に答える
0

@dcastroの回答によると（私は完全に同意します）、親要素は相対値（％など）ではなく固定値（pxなど）を持っている必要があります。したがって、相対値のみを使用できるJqueryを使用したちょっとしたトリック

<div id="E_slick" style="height: 75%">
    <img class="eve_img" src="myfile.jpg" style="max-width: 100%; max-height:100%"> 
</div>

したがって、コツはフードの高さを取得してimgに設定することです。簡単にするために、jQueryを使用します。

$('.eve_img').height( $("#E_slick").height() )
于 2019-02-26T22:28:18.437 に答える