lightboxのサムネイルサイズを揃えたい

Question

いつもお世話になっております。

jsのプラグイン、lightboxを使用してモーダルウィンドウを複数作成したいのですが、サムネイル画像のサイズがバラバラ（WPの投稿画像を想定しています）なものを均一、天地中央に表示させたいのですが、どうしてもバラバラのサイズで表示されてしまいます。

lightboxを使用しない場合は下記のコードで全てサイズが統一されて表示されるのですが、どのようにすればサムネイルのサイズが揃いますでしょうか。
ご教示お願いいたします。

				<div class="wraptest">
					<div class="inner trim_w">
						<a href="https://picsum.photos/200/300" data-lightbox="image-1"><img src="https://picsum.photos/200/300"></a>
					</div>
				</div>
				<div class="wraptest">
					<div class="inner trim_w">
						<a href="https://picsum.photos/400/200" data-lightbox="image-1"><img src="https://picsum.photos/400/200"></a>
					</div>
				</div>
				<div class="wraptest">
					<div class="inner trim_w">
						<a href="https://picsum.photos/800/300" data-lightbox="image-1"><img src="https://picsum.photos/800/300"></a>
					</div>
				</div>

.trim_w{
position: relative;
height: 0;
overflow: hidden;
width: 100%;
}
.trim_w img{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.trim_w img{
height: auto;
width: 100%;
}

.wraptest{
max-width:350px; 
width:100%
}
.inner{ 
padding-top:71.428%; 
}

Comments

[aKusano]

実際にlightboxを適用してサイズがバラバラになってしまう状態を見れるものがあると検証しやすいのですが用意できますか？

[nunuco]

ありがとうございます。 そのようなサービスがあるか探してみたところcodepenというものが該当したようで、以下にjs,css、ソースコードを入れてみたのですが、jsがうまく動かないようです。 （サイズがバラバラになってしまっているのは確認できるようです） こんなものでも大丈夫でしょうか？ https://codepen.io/nunuco/pen/BProVQ

Answer 1

天地中央なら今のままで出来ていますよ。
codepenのものも天地中央になっています。
3つの箱の高さが同じで縦横比が違う画像が入ってるのでいびつに見えるかもしれませんが。
それぞれの.wraptestに違う背景色を当ててみたらわかりやすいかもしれません。