画像の一部だけ表示

  Webクリエイターボックスさんからのコピペと、divで、一列に並べる “float: LEFT” の覚書。

www.webcreatorbox.com

acworksさんによる写真ACからの写真

◎html

1. <div style="float: LEFT; margin: 2px;"><img src="画像url"></div>
2. <div class="img-a" style="float: LEFT; margin: 2px;"><img src="画像url"></div>
3. <div class="img-b" style="float: LEFT; margin: 2px;"><img src="画像url"></div>

◎css

1. .img-a img {
2.  width:90px; height:100px;
3.  object-fit:none;
4.  object-position:38% 10%;
5.  }
6. .img-b img {
7.  width:45px; height:45px;
8.  object-fit:none;
9.  object-position:67% 26%;
10. }