web-dev-qa-db-ja.com

CSS：縦横比を保ちながら幅または高さを100％にする？

現在、STYLEでは、高さにwidth: 100%とautoを使用できます（またはその逆）が、それでも画像を特定の位置に制限することはできません。それぞれ、幅が広すぎたり高すぎたりします。

何か案は？

cssimageheightwidth
157
Weston Watson

画像に寸法を1つだけ定義した場合、画像の縦横比は常に維持されます。

イメージがあなたが好むよりも大きい/高いという問題はありますか？

画像に必要な最大の高さ/幅に設定されたDIVの内側に配置してから、overflow：hiddenを設定することができます。それはあなたが望むものを超えて何かをトリミングするでしょう。

画像の幅と高さが100％：自動で、縦が高すぎると思う場合は、アスペクト比が維持されているためです。切り取るか、縦横比を変更する必要があります。

あなたが具体的に達成しようとしていることについて、もう少し情報を提供してください。私はもっと助けようとします！

---フィードバックに基づく編集---

max-width と max-height のプロパティに精通していますか？あなたはいつでもそれらを設定することができます。最小値を設定せず、最大の高さと幅を設定した場合、画像は変形せず（縦横比は維持されます）、最大の長さを超えた場合よりも大きくなりません。

124
Andrew

数年後、同じ要件を探して、background-sizeを使用するCSSオプションを見つけました。

最近のブラウザ（IE9 +）で動くはずです。

<div id="container" style="background-image:url(myimage.png)">
</div>

そしてスタイル：

#container
{
  width:  100px; /*or 70%, or what you want*/
  height: 200px; /*or 70%, or what you want*/
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

参照： http://www.w3schools.com/cssref/css3_pr_background-size.asp

そしてデモ： http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size

73
conca

CSSのmax-widthプロパティを100%に設定すると、画像はその親要素の幅いっぱいに表示されますが、実際のサイズより大きくレンダリングされないため、解像度が維持されます。

heightプロパティをautoに設定すると、画像の縦横比が維持されます。この方法を使用すると、静的な高さを上書きして、画像をあらゆる方向に比例して曲げることができます。

img {
    max-width: 100%;
    height: auto;      
}
55
Adam Waite

同じ問題がありました。私にとっての問題は、heightプロパティもすでに他の場所で定義されていることでした。このように修正しました：

.img{
    max-width: 100%;
    max-height: 100%;
    height: inherit !important;
}
22
Flo

シンプルでエレガントなワーキングソリューション：

img {
  width: 600px;  /*width of parent container*/
  height: 350px; /*height of parent container*/
  object-fit: contain;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
22
user3334941

簡単な解決策：

min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
margin: 0;
padding: 0;

ちなみに、親のdivコンテナの中央に配置したい場合は、これらのcssプロパティを追加できます。

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

それは本当に期待通りに動作するはずです:)

8
Alexis K

その答えの1つに、background-size：containscssステートメントがあります。これは、やりたいことを直接的に記述したものであり、ブラウザーで実行するだけです。

残念ながら遅かれ早かれ影を適用する必要があるでしょう。残念ながらこれは背景画像の解決策ではうまくいかないでしょう。

それで、あなたはレスポンシブであるコンテナを持っているとしましょう。

.photo {
  max-width: 150px;
  min-width: 75px;
  max-height: 150px;
  min-height: 75px;
}

そしてコンテナは、オーバーフローしたりトリミングされたりするような非常に高い画像を取得することを避けるためにコンテナの高さのピクセルを認識しなければならないimgを持っています。

Imgは、最初に小さい幅をレンダリングできるようにし、次にパーセンテージベースにするために100％の最大幅を定義する必要があります。これにより、パラメトリックになります。

.photo > img {
  max-width: 100%;
  max-height: 150px;
  -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,1);
  -moz-box-shadow:    0 0 13px 3px rgba(0,0,0,1);
  box-shadow:         0 0 13px 3px rgba(0,0,0,1);
}

それはいい影を持っていることに注意してください;）

このフィドルでの実例をお楽しみください。 http://jsfiddle.net/pligor/gx8qthqL/2/

5
Georgios Pligoropoulos

高さと幅は固定されていますが、サイズが異なる画像を持つ長方形のコンテナにこれを使用します。

img {
  max-width: 95%;
  max-height: 15em;
  width: auto !important;
}
4
Alejandro Salamanca Mazuelo

アスペクト比を尊重する必要がある寸法にautoを使用するのが最善です。あなたが他のプロパティをautoに設定しない場合、最近のほとんどのブラウザはあなたがアスペクト比を尊重したいと思っていますが、それらの全てではないでしょう（例えば、Windows Phone 8のIE10はそうではありません）

width: 100%;
height: auto;
3
Davy

これは、concaのリンクをたどって背景のサイズを調べた後に思いついた非常に簡単な解決策です。それはイメージを爆破して、それからそれを拡大縮小することなしに外側のコンテナの中心に合わせます。

<style>
#cropcontainer
{
  width:  100%; 
  height: 100%; 
  background-size: 140%;
  background-position: center;
  background-repeat: no-repeat;
}
</style>

<div id="cropcontainer" style="background-image: url(yoururl); />
2
bill davis

古い問題に飛び込むのではなく、...

#container img {
      max-width:100%;
      height:auto !important;
}

あなたが高さの重要な上書きを使うのでこれが適切でないとしても、あなたがあなたのために高さと幅を設定するWordPressのようなCMSを使っているなら、これはうまく機能します。

1
Levi G

CSSは一般的な誤解であるため、JQueryなどを使用してください（ここでは単純な設計目標に関する無数の質問と議論から明らかです）。

画像の幅は100％ですが、高さが大きすぎる場合は最大高さが適用されます。もちろん、正しい縦横比は保存されています。

0
Ungesund