我正在编辑一个Wordpress主题,其主要内容宽度为70%,侧边栏为30%。在主要内容部分中,我添加了一个博客供稿区,其中包含3篇最新博文。每篇文章都是:
#front-blog-feed .post {
float: left;
width: 33.33%; }
每个.post div都有一个顶部div:
.front-blog-thumb {
height: 220px;
width: 100%;
overflow: hidden; }
...这就是我添加缩略图的地方。所以我想要实现的是WP缩略图和偶尔的视频帖子,其中vimeo视频显示为缩略图,所有都具有220px的固定高度,但宽度填充33%的帖子宽度,具有正确的宽高比。到目前为止,我所取得的最好成绩是functions.php:
的组合add_image_size( 'custom-size', 9999, 400, array( 'center', 'center' ) );
缩略图img CSS:
.front-blog-thumb img {
min-height: 220px;
max-width: none; /*max-width: none to overrule theme CSS*/
主要问题是用户需要将横向和纵向图像作为特色图像(和视频帖子)。我现在看起来很不错并且在布局中工作,但是图像的视觉部分是图像的左上角部分,并且很多图像文件被加载但隐藏了溢出:隐藏,这看起来不是很好理念。一些特色图像看起来不错,有些则不太好。所以问题在于结合:流体33%宽度3列布局,220px可见的固定高度缩略图,不错的裁剪以及使用此设置使风景和肖像图像看起来都正常的某种方式。有什么想法吗?