gpt4 book ai didi

html - 在 wordpress 中修复我的画廊简码

转载 作者:行者123 更新时间:2023-11-28 12:43:15 25 4
gpt4 key购买 nike

我一直在努力弄清楚如何在 wordpress 中修复我的画廊简码。基本上,目标是用户可以在短代码中放置任何大小的图像,并且在查看时不会看起来拉伸(stretch)或扭曲。

这是应该的样子

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

如果您注意到第一张图片底部缺少 5 像素的边距。第二和第三张图片没有触及 div 的底部。

这是函数的代码.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%; }

我花了好几个小时研究如何才能达到我想要的结果。只要图像适合容器并且质量不失真,如果图像被裁剪就可以了

最佳答案

更改您的样式以匹配这些样式:

-给gallery_box添加border属性

.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}”类

-将 .inner_gallery img 更改为:

.inner_gallery img{
max-width : 400px;
max-height : 400px;
}

这是一个快捷的解决方案,但它可以完成工作。只要你对裁剪没问题。

关于html - 在 wordpress 中修复我的画廊简码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17551407/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com