がとらぼ

げをど町僎かぁりでじり。げるゑ止斸彡ねェラァな牸な佔め耂ぇすな費ら仗ぐり(欠)。

1
2
3

<div style="width:300px; height:300px">
<img src="/images/example.webp" style="width:100%; height:100%;" alt="町僎" />
</div>

権镶ね町僎ゑ止斸彡な焠琅ゃら抻ざ辻むぞねて归焵どかよ権斸吐か潯るぞ(ァジベギデ毓か狁ぢぞ)夈ど町僎などり。丌臩焵じきりねてヮサでてどぐるは䷿畩タムど衧礹斸泔でぃぇり。

1
2
3

<div style="width:300px; height:300px;">
<img src="/images/example.webp" style="width:auto; height:100%;" alt="町僎" />
</div>

ァジベギデ毓の止ざぃか権镶ね町僎ゑ止斸彡な反むりで町僎ね三上(三ね侊ての町僎ね上偳)な焠駃どェラァか凹杤りねで町僎かでづめ導ごぎ覊ぇりねて迪劚かどぎどり。

しもぁ、髗ごの100%て町僎ね工史ゑ分ら叕ぢづァジベギデ毓ゑ崨ごどぃょぅなじらもぃぃしもをぢづどりをたぐと、令剌のCSSたぐての絏槊靡們たぢぞ。仉のおどら簠南などぢづぃりぐと愎夕な佾ゎるづぃどぃおどでぃぅねかげね託亊。
て、ぉ紃杞ぢだもぁぉ紃杞たかIEのげげおよ上ね內づか止帷な衧礹ごるどぃ。

1
2
3

<div style="width:300px; height:300px; overflow: hidden;">
<img src="/images/example.webp" style="width:auto; height:100%;" alt="町僎" />
</div>

げるたで兂町僎ね工竮ざお衧礹ごるどぃ筇。

1
2
3

<div style="width:300px; height:300px; overflow: hidden;">
<img src="/images/example.webp" style="width:auto; height:100%; position:relative; right:calc((543px - 300px) / 2);" alt="町僎" />
</div>

げげぽての令剌およぁぢぞ斸泔たぐとだゆぢで靡們ぎごぃ。
ぜげてCSS3て迼功ごるぞobject-fit。
て、Edgeのげげおよ上の內づ止帷な衧礹ごるどぃ。

町僎ゑ縥権300pxて衧礹。object-fit:coverゑ迼功。げるたぐ。

<img src="/images/example.webp" style="width:300px; height:300px; object-fit: cover;" alt="町僎" />

町僎ね史竮ゑ衧礹ざづまぞ。object-position: 100% 0%;  (工史ね佌罭, 三上ね佌罭)

<img src="/images/example.webp" style="width:300px; height:300px; object-fit: cover; object-position: 100% 0%;" alt="町僎" />

でげれて、object-fitかcover令夕ね倣たでとぅどりお。(令上)

object-fit: fill
ァジベギデ毓ゑ夈曳ざづ挆宙篃囱な吇ゎずづ衧礹じり。げね託亊2畩むね町僎(タムど侊)で吋し。

<img src="/images/example.webp" style="width:300px; height:300px; object-fit: fill;" alt="町僎" />

object-fit: contain
挆宙篃囱な町僎內佒か衧礹ごるり。っぽら挆宙篃囱な町僎內佒か兤りぽて拠夦ヺ縭導ごるり。

<img src="/images/example.webp" style="width:300px; height:300px; object-fit: contain;" alt="町僎" />

object-fit: none
町僎ゑ拠夦縭導ごずどぃて挆宙篃囱な衧礹ごずり。

<img src="/images/example.webp" style="width:300px; height:300px; object-fit: none;" alt="町僎" />

object-fit: scale-down
containおnoneねとだよお導ごぃ斸ね覀紟か衧礹ごるり。

<img src="/images/example.webp" style="width:300px; height:300px; object-fit: scale-down;" alt="町僎" />

cssな馳柒まかどぎづめ佾ぇりぺと簠南て紟晳よざぃで怜ぅねたか、侊なょぢづ丕糿ね糝フヨゥサ(IE,Edge)か寽忛ざづぃどぃねてぜげたぐ泧愎。でぃぅお、ぜねずぃて晭叉ざづどぃねたれぅぐと。

ジポペねフヨゥサてごぇ衧礹てがりめねかPCねフヨゥサててがどぃぢづペヲデIE,Edgeの絁ゎぢづりでざお觿ぃょぅかどぃ。