プログラミング処方箋.38　画像表示基本から

単純に、画像を表示する方法

HTML

<img class="きほん" src="ABC/アップライト.jpg" alt="" title="">
</img>

CSS

.きほん
{max-width: 100vw;
width: 100%;
height: 600px;/*none;にして、高さ固定　画像pxサイズと合わせる　『 % vh 』では状況変わる*/
object-fit: none;/*none;有効、絶対いる、画像比率保護 またはcover;*/
background-color: #F5F5F5;}/*うすいグレー　背景メイン色*/

別パターン

元の画像サイズなんでも、収める
画面スクリーンはみだしOK、中央寄りながら、

HTML

<div class="サイズ"><!--divに、class付け-->
	<img src="ABC/22a大スリム.jpg"></img>
</div>

CSS

.サイズ
{display: inline-flex;/*追加 flax; inline-flex;*/
  width:100%;/* 無くてもいい */
  height:750px;/*無しにすると、元の画像サイズ（超デカい）*/
	justify-content: center;/*start; center;中央、right;右側*/
	background-color: #CCCCCC;}