文書にすると分かりにくいのですが、添付画像の様なものを作っています。
下3枚の画像をクリックすると、上部の大きな画像の表示が切り替わる仕組みです。
上部はこれで良いのですが、下部に並んだ3枚のimg
を元のimg
通り、上下左右切り取らずに全てそのまま表示したい(分かりやすくbackground:redにしてますが、この中に納めて、横長の写真も縦長の写真もそのまま表示したい)のですが、css
の書き方がわからず、ご教示頂けますと幸甚です。
css
のコードに記載の通り、img
のwidth:100%
としてheight:auto
としている部分が理由と思いますが、height:100%
としてしまうと、当然、元imgの縦横比が歪んでしまいます。
html
1### 下部3枚の部分のみ 2<div class="card-block lesson-img-list p-0" > 3 <ul class="thumb p-0 m-0"> 4 <li class="thumb1"> 5 <img src="/uploads/lesson_image/lesson_image/21/make_9.jpg"/> 6 </li> 7 <li class="thumb2"> 8 <img src="/uploads/lesson_image/lesson_image/45/make_10.jpg"/> 9 </li> 10 <li class="thumb3"> 11 <img src="/uploads/lesson_image/lesson_image/69/make_11.jpg"/> 12 </li> 13 </ul> 14</div>
css
1.card-block.lesson-img-list { 2 background-color: red; 3 height: 7rem; 4} 5.card-block.lesson-img-list .thumb li { 6 margin: 0; 7 padding: 0; 8 list-style: none; 9 display: inline-block; 10 width: 32%; 11 height: 7rem; 12 overflow: hidden; 13 position: relative; 14 cursor: pointer; 15} 16.card-block.lesson-img-list .thumb li img { 17 position: absolute; 18 width: 100%; 19 height: auto; 20 top: 50%; 21 left: 50%; 22 -webkit-transform: translate(-50%, -50%); 23 -ms-transform: translate(-50%, -50%); 24 transform: translate(-50%, -50%); 25} 26.card-block.lesson-img-list .thumb li:hover img { 27 opacity: 0.8; 28 filter: alpha(opacity=80); 29 -ms-filter: "alpha(opacity=80)"; 30} 31
回答2件
あなたの回答
tips
プレビュー