在DIV中控制缩略图大小的CSS

Question

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

您可以在下面的图像中看到手册缩略图的问题：

​

下面是融合图库图像div和手册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>

​

请让我知道如何增加这些画廊图像的大小，并在融合画廊图像div中垂直居中。

谢谢你的帮助。

Answer 1

理想情况下，您应该有一个足够大/适合div的一般大小的图像，这样您就不必增加大小，而是只需调整它即可。

例如，图书图像有100%的宽度，但垂直方向太短。一旦你有了它，就可以使用flexbox在垂直和水平方向居中。

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