Css

CSSは画像のサイズ変更を強制し、アスペクト比を維持します



Css Force Image Resize



解決： 

img {表示：ブロック;最大幅：230px; max-height：95px;幅：自動;高さ：自動; }
この画像は元々400x400ピクセルですが、CSSによってサイズが変更される必要があります。
   
これにより、指定した領域に対して大きすぎる場合に画像が縮小されます（欠点として、画像は拡大されません）。

 
  
私はこの問題に非常に苦労し、最終的にこの単純な解決策にたどり着きました。
 
オブジェクトフィット：カバー;幅：100％;高さ：250px;
必要に応じて幅と高さを調整でき、object-fitプロパティがトリミングを行います。
 
 
 
の可能な値に関する詳細情報object-fitプロパティと互換性テーブルはこちらから入手できます：https：//developer.mozilla.org/en-US/docs/Web/CSS/object-fit
 
乾杯。
  
  以下のソリューションにより、画像のスケールアップとスケールダウンが可能になります 、親ボックスの幅によって異なります。
 
 
 
すべての画像には、固定幅の親コンテナがあります デモンストレーションのみを目的としています 。本番環境では、これが親ボックスの幅になります。
 
ベストプラクティス（2018）：
 
このソリューションは、使用可能な最大幅で画像をレンダリングし、その幅のパーセンテージとして高さを調整するようにブラウザーに指示します。
 
.parent {幅：100px; } img {表示：ブロック;幅：100％;高さ：自動; }
この画像は元々400x400ピクセルですが、CSSによってサイズが変更される必要があります。
  
ファンシーソリューション：
 
より洗練されたソリューションを使用すると、サイズに関係なく画像をトリミングし、トリミングを補正するために背景色を追加することができます。
 
.parent {幅：100px; } .container {display：block;幅：100％;高さ：自動;位置：相対;オーバーフロー：非表示;パディング：34.37％0 0 0; / * 34.37％= 100 /（w / h）= 100 /（640/220）* /} .container img {display：block;最大幅：100％;最大高さ：100％;位置：絶対;上：0;下：0;左：0;右：0; }
この画像は元々640x220ですが、CSSによってサイズが変更される必要があります。
  
パディングを指定する行の場合、画像のアスペクト比を計算する必要があります。次に例を示します。
 
640px（w）= 100％220px（h）=？ 640/220 = 2.909 100 / 2.909 = 34.37％
したがって、上部のパディング= 34.37％です。