CSS控制DIV内的缩略图大小

Question

我正在使用 Avada 主题设置一个 Wordpress 图片库，我希望能够增加图片库缩略图的大小(例如 200% 或 300%)并将它们垂直居中在 .融合图库图像 div.

您可以在这张图片中看到小册子缩略图的问题:

这是宣传册 div 的 fusion-gallery-image div 和相关元素。

<div class="fusion-gallery-image"><a href="http://bigidearesults.com/sandbox/wp-content/uploads/2018/03/brochure-saguaro-ranch-brochure-2.jpg" class="fusion-lightbox" data-rel="iLightbox[728c57306ad178f5910]" data-title="brochure-saguaro-ranch-brochure-2" title="brochure-saguaro-ranch-brochure-2" data-caption=""><img src="http://bigidearesults.com/sandbox/wp-content/uploads/2018/03/brochure-saguaro-ranch-brochure-2-400x201.jpg" alt="" title="brochure-saguaro-ranch-brochure-2" aria-label="brochure-saguaro-ranch-brochure-2" class="img-responsive wp-image-11546" srcset="http://bigidearesults.com/sandbox/wp-content/uploads/2018/03/brochure-saguaro-ranch-brochure-2-200x100.jpg 200w, http://bigidearesults.com/sandbox/wp-content/uploads/2018/03/brochure-saguaro-ranch-brochure-2-400x201.jpg 400w, http://bigidearesults.com/sandbox/wp-content/uploads/2018/03/brochure-saguaro-ranch-brochure-2-600x301.jpg 600w, http://bigidearesults.com/sandbox/wp-content/uploads/2018/03/brochure-saguaro-ranch-brochure-2-800x401.jpg 800w, http://bigidearesults.com/sandbox/wp-content/uploads/2018/03/brochure-saguaro-ranch-brochure-2-1200x602.jpg 1200w, http://bigidearesults.com/sandbox/wp-content/uploads/2018/03/brochure-saguaro-ranch-brochure-2.jpg 1597w" sizes="(min-width: 2200px) 100vw, (min-width: 824px) 363px, (min-width: 732px) 545px, (min-width: 640px) 732px, "></a></div>

请告诉我如何增加这些图库图像的大小并在 fusion-gallery-image div 中将它们垂直居中。

感谢您的帮助。

Answer 1

理想情况下，您会拥有一张足够大/适合 div 的一般大小的图像，这样您就不必为增加大小而烦恼，而只是适应它。

例如，书籍图片的 100% 宽度很好，但垂直方向太短了。一旦你有了它，使用 flexbox 垂直和水平居中。

.fusion-gallery-image {    
    display: flex;
    justify-content: center;
    align-items: center;
}