Q&A
前提・実現したいこと
ポートフォリオサイトに自分の作品を載せたいです。
object-fitを使って、画像を正方形で表示をしたいのですが、画像の端がぴったり合いません。
横がピッタリ合うようにしたいのですが、どこを変更したらいいでしょうか。
該当のソースコード
html
1 <div id="work" class="work"> 2 <ul> 3 <li class="work-content"><a><img class="ofi" src="img/マスクバナー２_.png" alt="#"></a></li> 4 <li class="work-content"><a><img class="ofi" src=" img/北海道医療大学.png" alt="#"></a></li> 5 <li class="work-content"><a><img class="ofi" src="img/動物医療.jpg" alt="#"></a></li> 6 <li class="work-content"><a><img class="ofi" src="img/sunshinecity.jpg" alt="#"></a></li> 7 </ul> 8 </div> 9 <!-- work -->
css
1#work { 2 width: 100%; 3} 4 5#work ul { 6 margin-left: 0; 7 width: 100%; 8 display: flex; 9 flex-direction: row; 10} 11 12#work .work-content { 13 width: 25%; 14 overflow: hidden; 15 text-align: center; 16 position: relative; 17 height: 100%; 18} 19 20#work .work-content:before{ 21 content: ""; 22 display: block; 23 padding-top: 100%; 24} 25 26#work img{ 27 position: absolute; 28 width: 100%; 29 height: 100%; 30 top: 0; 31 right: 0; 32 bottom: 0; 33 left: 0; 34 margin: auto; 35 object-fit: cover; 36 object-position: center; 37 font-family: 'object-fit: cover; object-position: bottom;'; 38}
補足情報（FW/ツールのバージョンなど）
macOS
visual studio code
回答1件
0
どうしたいのか把握できてませんが、
ulのデフォルトのpaddingを消したらどうでしょう。
css
1#work ul { 2 margin-left: 0; 3 width: 100%; 4 display: flex; 5 flex-direction: row; 6 padding: 0; /* 追加 */ 7}
投稿2021/03/08 15:03
総合スコア34073
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。