html - 画像ギャラリーでこの問題を回避するにはどうすればよいですか？

Question

これが私のギャラリーの画像のHTMLを持っている方法です：

<p class="crop">
<img src="image1.jpg" alt="image1.jpg" /></p>
<p class="crop">
<img src="image2.jpg" alt="image2.jpg" /></p>

ただし、このようにpクラスを使用すると、画像のグループではなく個別の画像になるため、次/前の矢印が機能しません。

ギャラリーの矢印が再び正しく機能するように、それらを画像のグループにする必要がありますが、画像をトリミングするために必要なpクラスを維持したいと思います。どうすればこれを回避できますか？

Answer 1

トリミングロジックをimgタグに移動します

<img class="crop" src="image1.jpg" alt="image1.jpg" />
<img class="crop" src="image2.jpg" alt="image2.jpg" />

Answer 2

p を 1 div に置き換えて、次のようにします。

<div class="crop">
<img>
<img>
</div>

必要に応じて画像を追加します (画像データを入力します)。

CSS では、次を使用できます。

.crop img {}

画像をトリミングするには！

お役に立てれば ：）