いつもお世話になっております。
jsのプラグイン、lightboxを使用してモーダルウィンドウを複数作成したいのですが、サムネイル画像のサイズがバラバラ(WPの投稿画像を想定しています)なものを均一、天地中央に表示させたいのですが、どうしてもバラバラのサイズで表示されてしまいます。
lightboxを使用しない場合は下記のコードで全てサイズが統一されて表示されるのですが、どのようにすればサムネイルのサイズが揃いますでしょうか。
ご教示お願いいたします。
html
1 2 <div class="wraptest"> 3 <div class="inner trim_w"> 4 <a href="https://picsum.photos/200/300" data-lightbox="image-1"><img src="https://picsum.photos/200/300"></a> 5 </div> 6 </div> 7 <div class="wraptest"> 8 <div class="inner trim_w"> 9 <a href="https://picsum.photos/400/200" data-lightbox="image-1"><img src="https://picsum.photos/400/200"></a> 10 </div> 11 </div> 12 <div class="wraptest"> 13 <div class="inner trim_w"> 14 <a href="https://picsum.photos/800/300" data-lightbox="image-1"><img src="https://picsum.photos/800/300"></a> 15 </div> 16 </div> 17
css
1.trim_w{ 2position: relative; 3height: 0; 4overflow: hidden; 5width: 100%; 6} 7.trim_w img{ 8position: absolute; 9top: 50%; 10left: 50%; 11-webkit-transform: translate(-50%, -50%); 12transform: translate(-50%, -50%); 13} 14.trim_w img{ 15height: auto; 16width: 100%; 17} 18 19.wraptest{ 20max-width:350px; 21width:100% 22} 23.inner{ 24padding-top:71.428%; 25}
回答1件
あなたの回答
tips
プレビュー