CSS：アスペクト比を維持しながら幅または高さ100％ですか？

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

何か案は？

画像で1つの寸法のみを定義する場合、画像のアスペクト比は常に保持されます。

画像があなたの好みよりも大きい/高いという問題はありますか？

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

画像の幅と高さが100％：autoで、高すぎると思われる場合は、アスペクト比が維持されているためです。トリミングするか、アスペクト比を変更する必要があります。

具体的に達成しようとしていることについて、さらに詳しい情報を提供してください。

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

max-widthとmax-heightプロパティを知っていますか？代わりにいつでも設定できます。最小値を設定せず、高さと幅の最大値を設定すると、画像が歪むことはなく（アスペクト比は保持されます）、どの寸法よりも長く、最大値に達することはありません。

数年後、同じ要件を探していたところ、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

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

heightプロパティを設定しautoて画像の縦横比を維持し、この手法を使用すると、静的な高さをオーバーライドして、画像を全方向に比例して伸縮させることができます。

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

シンプルでエレガントな作業ソリューション：

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

同じ問題があった。私にとっての問題は、heightプロパティが他の場所でも既に定義されていることでした。

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

シンプルなソリューション：

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%);

それは本当に期待どおりに機能するはずです:)

答えの1つにはbackground-sizeが含まれます。CSSステートメントが含まれています。これは、やりたいことの簡単なステートメントであり、ブラウザーが実行するだけなので、私はとても気に入っています。

残念ながら遅かれ早かれ、背景の画像ソリューションではうまく機能しない影を適用する必要があります。

したがって、レスポンシブなコンテナがあるが、最小と最大の幅と高さの境界が明確に定義されているとしましょう。

.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/

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

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

アスペクト比を尊重する必要があるディメンションでautoを使用するのが最善です。他のプロパティをautoに設定しない場合、今日のほとんどのブラウザーはアスペクト比を尊重することを前提としていますが、すべてではありません（たとえば、Windows Phone 8のIE10はそうではありません）。

width: 100%;
height: auto;

これは、コンカのリンクをたどって背景のサイズを確認した後で思いついた非常に簡単な解決策です。画像を拡大し、スケーリングせずに外側のコンテナの中央に合わせます。

<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); />

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

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

高さに対して！importantオーバーライドを使用するため、これは適切ではありませんが、高さと幅を設定するWordPressのようなCMSを使用している場合、これはうまく機能します。

最近一つは使用することができるvwとvh1％表し単位、Vの iewportのW IDTHおよびHをそれぞれ八。

https://css-tricks.com/fun-viewport-units/

したがって、たとえば：

img {
  max-width: 100vw;
  max-height: 100vh;
}

...は、アスペクト比を維持しながら、画像を可能な限り高くしますが、ビューポートの幅を100％より大きくすることはありません。

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

CSSで希望どおりのことを行うことはできません。画像の幅は100％にする必要がありますが、この幅の高さが高すぎる場合は、最大高さが適用されます。もちろん、正しい比率になります。保存。

これはあなたが探しているものだと思います。自分で探していたのですが、コードを見つける前にもう一度思い出しました。

background-repeat: repeat-x;
background-position: top;
background-size:auto;
background-attachment: fixed;

デジタルの進化が進んでいます。