我一直在试图弄清楚如何在wordpress中修复我的画廊短代码。基本上,目标是用户可以在短代码中放置任意大小的图像,并且在查看时看起来不会拉伸或扭曲。
这应该是看起来像什么
http://i255.photobucket.com/albums/hh140/testament1234/Thumb_zpsf57e544b.jpg
这是我在编码时想出来的。
http://s255.photobucket.com/user/testament1234/media/thumbnail_zpsd95f993d.jpg.html?sort=3&o=0
如果您发现第一张图片底部缺少5px边距。第2张和第3张图片没有触及div的底部。
这是function.ph
的代码//Gallery Shortcode 2
function short_gallery($atts, $content = null) {
extract(shortcode_atts(array(), $atts));
return '<div class=" gallery_box"><div class="inner_gallery"><a class="fancybox" href="'.$content.'"><img src="'.$content.'"/></a></div></div>';
}
add_shortcode("gallery", "short_gallery");
这是我造型的代码。
.gallery_box{background-color:#E8ECEF; float:left; margin:0px 20px 10px 0px; width:250px; height:200px; overflow:hidden }
.inner_gallery{margin:10px; margin:5px}
.inner_gallery img{max-width:100%; }
我几个小时都在研究如何实现我想要的结果。如果图像是裁剪的,只要它适合容器并且质量没有被分散就可以了
答案 0 :(得分:0)
更改样式以匹配以下内容:
-add border属性到gallery_box
.gallery_box{
background-color:#E8ECEF;
float:left;
margin:0px 20px 10px 0px;
width:250px;
height:200px;
overflow:hidden;
border:5px solid #E8ECEF;
}
- 删除“.inner_gallery {margin:10px; margin:5px}”class
-change .inner_gallery img to:
.inner_gallery img{
max-width : 400px;
max-height : 400px;
}
这是一个快速的快捷解决方案,但它完成了工作。只要你对裁剪没问题。
答案 1 :(得分:0)
我的建议是将图像设置为其容器的背景图像(或img标签的背景图像,并将src设置为空白图像以进行正确缩放):
<figure>
<img src="BLANK_IMAGE_WITH_YOUR_TARGET_SIZE" style="background-image:url('URL')" alt="My Image" />
</figure>
然后将背景大小设置为覆盖:
figure { width:250px; border:solid 5px #666; margin:0 20px 10px 0; }
figure img { width:100%; background-size:cover; background-position:center center; background-repeat:no-repeat; }