画像を扱っているのですが、縦横比の問題に遭遇しました。
<img src="big_image.jpg" width="900" height="600" alt="" />
ご覧のとおり、heightすでにwidth指定されています。画像の CSS ルールを追加しました。
img {
max-width: 500px;
}
しかし、私はとbig_image.jpgを受け取ります。縦横比を維持しながら、画像のサイズを変更するように設定するにはどうすればよいですか。width=500height=600
img {
display: block;
max-width:230px;
max-height:95px;
width: auto;
height: auto;
}<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">これにより、指定された領域に対して大きすぎる場合に画像が縮小されます (欠点として、画像は拡大されません)。
私はこの問題にかなり苦労しましたが、最終的にこの簡単な解決策にたどり着きました:
object-fit: cover;
width: 100%;
height: 250px;
ニーズに合わせて幅と高さを調整でき、object-fit プロパティによってトリミングが行われます。
object-fitプロパティの可能な値と互換性テーブルの詳細については、https ://developer.mozilla.org/en-US/docs/Web/CSS/object-fit を参照してください。
乾杯。
以下の解決策は、親ボックスの幅に応じて、画像の拡大と縮小を可能にします。
すべてのイメージには、デモンストレーションのみを目的として固定幅の親コンテナーがあります。本番環境では、これは親ボックスの幅になります。
このソリューションは、ブラウザーに、使用可能な最大幅で画像をレンダリングし、高さをその幅のパーセンテージとして調整するように指示します。
.parent {
width: 100px;
}
img {
display: block;
width: 100%;
height: auto;
}<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<div class="parent">
<img width="400" height="400" src="https://placehold.it/400x400">
</div>より洗練されたソリューションを使用すると、サイズに関係なく画像をトリミングし、背景色を追加してトリミングを補うことができます。
.parent {
width: 100px;
}
.container {
display: block;
width: 100%;
height: auto;
position: relative;
overflow: hidden;
padding: 34.37% 0 0 0; /* 34.37% = 100 / (w / h) = 100 / (640 / 220) */
}
.container img {
display: block;
max-width: 100%;
max-height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}<p>This image is originally 640x220, but should get resized by the CSS:</p>
<div class="parent">
<div class="container">
<img width="640" height="220" src="https://placehold.it/640x220">
</div>
</div>パディングを指定する行については、画像の縦横比を計算する必要があります。次に例を示します。
640px (w) = 100%
220px (h) = ?
640/220 = 2.909
100/2.909 = 34.37%
したがって、上部パディング = 34.37% です。
background-size プロパティは ie>=9 のみですが、それで問題ない場合は、background-imageと setで div を使用できbackground-size: containます。
div.image{
background-image: url("your/url/here");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
これで、div サイズを任意に設定するだけで、画像の縦横比が維持されるだけでなく、div 内で垂直方向と水平方向の両方で中央に配置されます。div にはタグ自体に width/height 属性がないため、css でサイズを設定することを忘れないでください。
このアプローチは setecs の回答とは異なります。これを使用すると、画像領域は一定になり、ユーザーによって定義されます (div サイズと画像の縦横比に応じて、水平または垂直に空のスペースを残します)。スケーリングされた画像のサイズ (空白なし)。
編集: MDN background-size ドキュメントによると、独自のフィルター宣言を使用して、IE8 で background-size プロパティをシミュレートできます。
Internet Explorer 8 は background-size プロパティをサポートしていませんが、非標準の -ms-filter 関数を使用して、その機能の一部をエミュレートすることができます。
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";
ここでのいくつかの回答と非常に似ていますが、私の場合、画像が高かったり、大きかったりしました。
このスタイルは、すべての画像が利用可能なすべてのスペースを使用し、比率を維持し、カットしないようにするための魅力のように機能しました。
.img {
object-fit: contain;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
「高さ」プロパティを削除します。
<img src="big_image.jpg" width="900" alt=""/>
両方を指定することで、画像の縦横比を変更しています。設定するだけでサイズが変更されますが、縦横比は維持されます。
オプションで、サイズ超過を制限するには:
<img src="big_image.jpg" width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/>
Firefox 71 以降(2019-12-03) およびChrome 79 以降(2019-12-10) は、要素のおよびHTML 属性の新しい CSS プロパティへの内部マッピングをサポートします (プロパティ自体はまだ直接使用できません)。widthheightIMGaspect-ratio
計算されたアスペクト比は、画像がロードされるまでスペースを確保するために使用され、計算されたアスペクト比が画像の実際のアスペクト比と等しい限り、画像のロード後にページの「ジャンプ」が防止されます。
これを機能させるには、2 つの画像サイズのいずれかを CSS 経由で次の auto値にオーバーライドする必要があります。
IMG {max-width: 100%; height: auto; }
<img src="example.png" width="1280" height="720" alt="Example" />
例では、画像がまだロードされておらず、有効な画像幅が の結果として 1280 未満であっても、16:9 (1280:720) のアスペクト比が維持されmax-width: 100%ます。
関連する Firefoxバグ 392261も参照してください。
これをcssに追加するだけで、元の比率を保ったまま自動で縮小・拡大してくれます。
img {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
レスポンシブな画像を維持しながら、画像に特定のアスペクト比を適用するには、次の操作を実行できます。
HTML:
<div class="ratio2-1">
<img src="../image.png" alt="image">
</div>
そして SCSS:
.ratio2-1 {
overflow: hidden;
position: relative;
&:before {
content: '';
display: block;
padding-top: 50%; // ratio 2:1
}
img {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
}
これは、作成者がアップロードする画像のサイズに関係なく、特定のアスペクト比を強制するために使用できます。
Thanks to @Kseso at http://codepen.io/Kseso/pen/bfdhg. Check this URL for more ratios and a working example.
画像コンテナ タグの CSS クラスを次のように設定しますimage-class。
<div class="image-full"></div>
これを CSS スタイルシートに追加します。
.image-full {
background: url(...some image...) no-repeat;
background-size: cover;
background-position: center center;
}
レスポンシブ アプローチのベスト プラクティスは、ビューポート ユニットと最小/最大属性を次のように使用することをお勧めします。
img{
display: block;
width: 12vw;
height:12vw;
max-width:100%;
min-width:100px;
min-height:100px;
object-fit:contain;
}
これを使用できます：
img {
width: 500px;
height: 600px;
object-fit: contain;
position: relative;
top: 50%;
transform: translateY(-50%);
}
次のような div を作成できます。
<div class="image" style="background-image:url('/to/your/image')"></div>
そして、この css を使用してスタイルを設定します。
height: 100%;
width: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain; // this can also be cover
img {
max-width: 80px; /* Also works with percentage value like 100% */
height: auto;
}<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="https://i.stack.imgur.com/aEEkn.png">
<p>Let's say the author of the HTML deliberately wants
the height to be half the value of the width,
this CSS will ignore the HTML author's wishes, which may or may not be what you want:
</p>
<img width="400" height="200" src="https://i.stack.imgur.com/aEEkn.png">