我正在使用Avada主题设置Wordpress图片库,并且希望能够增加图库缩略图的大小(例如200%或300%),并将其垂直放置在.fusion-gallery中-image div。
您可以在此图像中看到小册子缩略图的问题:
这是融合画廊图像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>
请让我知道如何增加这些图库图像的大小,以及如何在Fusion-gallery-image div中垂直居中。
谢谢你的帮助。
最佳答案
理想情况下,您的图像应该足够大/适合div的一般大小,因此您不必费心增加大小,而只是适合它。
例如,该书的图像具有100%的宽度,但垂直方向太短。一旦有了它,就可以使用flexbox垂直和水平居中。
.fusion-gallery-image {
display: flex;
justify-content: center;
align-items: center;
}
关于css - CSS在DIV中控制缩略图的大小,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/49500432/