回転しているかどうかに関わらず、画像を黒い境界線の内側に収めようとしています。私はオーバーフローを試みました：隠された、最大高さ：100％とオブジェクトフィット：含まれているがまだ画像のオーバーフロー。変換を伴う。私は次に何を試すべきか分からない。CSS：画像がオーバーフローする
<div style="border: 1px solid">
<img img-fix-orientation="model.post.image" ng-src="{{model.post.image ? model.post.image : model.post.sub_category.name == 'Service' ? 'images/service.png' : 'images/thing.png'}}" style="max-width:100%;" alt="post image" />
</div>
注、object-fitは良いブラウザのサポートを欠いて、ここで私はcontainがで適用され、W/O transform方法を示したいと思いますけれども超えることを来るためのオプションがあります。
img要素ノーカットで画像を表示するには、あなたが
object-fit: contain使用し、
100%に
widthおよび/または
heightを設定し、それが両方の垂直方向と水平方向の画像がありませんオーバーフローに合うようになります。
.wrapper {
display: inline-block;
height: 150px;
width: 250px;
padding: 5px;
margin: 5px;
background: lightgray;
}
.wrapper img {
height: 100%;
width: 100%;
object-fit: contain;
}<div class="wrapper">
<img src="http://placehold.it/150x300/f00"/>
</div>
<div class="wrapper">
<img src="http://placehold.it/300x150/00f"/>
</div>さて、あなたはtransform: rotate(90deg)を適用すると、それは上記のサンプルのように配置/ドキュメントフローの観点からして、それはまだ大きさである、ことを行いますのみ視覚です。
これはwrapperもimgどちらも任意の変更を認識しており、垂直に、水平imgを回転させたときので、1水平wrapperで、オーバーフローを得ることを意味します。
ようimgを回転させ、それがオーバーフローを補償できるように、手前wrapperのアスペクト比を知るために、垂直transformニーズに合わせすることができるように、このサンプルでは、= 150ピクセル/ 250ピクセル（知られています0.6）、変換にscaleを追加することでオーバーフローを回避できます。同じ修正プログラムを適用するには、垂直wrapper 1を必要としている垂直imgについては
.wrapper {
display: inline-block;
height: 150px;
width: 250px;
padding: 5px;
margin: 5px;
background: lightgray;
}
.wrapper img {
height: 100%;
width: 100%;
object-fit: contain;
transform: rotate(90deg) scale(0.6);
}<div class="wrapper">
<img src="http://placehold.it/300x150/00f"/>
</div>。
はdiv要素がオーバーフローを考慮するかを知るために、設定された幅と高さを持たなければなりません助けが必要。
divの幅が500ピクセルだとすると、オーバーフローが適用されます。
この作業を行うには、いくつかの方法があります。含める要素の高さを指定するには、overflow-yプロパティをhiddenに設定します。 （高さは1が設定されず、どのブラウザがオーバーフローを考慮するかを知ることができ...設定する必要があります？）
.container {
border: 1px solid black;
height: 100px;
overflow-y: hidden;
}
.img {}<div class="container">
<img src="http://via.placeholder.com/150x150"/>
</div>
<p>Image element is 150px tall, but the containing element is only 100px tall</p>ます。また、背景画像としてIMGを設定することができますその後、background-size: containプロパティを使用します。 これはあなたのイメージの元のサイズを維持します：
.container-sm {
background: url('https://i.stack.imgur.com/pHXH4.png') center center no-repeat;
background-size: contain;
border: 1px solid black;
height: 50px;
}
.container-lg {
background: url('https://i.stack.imgur.com/pHXH4.png') center center no-repeat;
background-size: contain;
border: 1px solid black;
height: 200px;
}<div class="container-lg"></div>
<br/>
<div class="container-sm"></div>
<p>Image is fully contained in div, regardless of image or div size.</p>ホープ、このことができます！
はいはい、この問題を解決します。しかし、アスペクト比と隠蔽を損なうことなく、完全な画像に収まる方法はありますか？ – MTA
があなたのdivにIDを与える、
#divid{
border: 1px solid black;
height: X px;
width: X px;
}
#divid img{
height: 100%;
width: 100%;
}
これはdivの内側にあなたのイメージに合うようになるとしましょう。
set css ** overflow：hidden ** on div –
あなたが内部に収まるようにするには、あなたのイメージを背景イメージとして置き、background-size：coverまたはbackground-size：containsという属性を追加してみてください。 – Kiwad