所以我正在设计一个 Wordpress 主题,我有四个 div (380x400),我使用帖子中的缩略图来填充背景,问题是,如果图片是横向的,它会在底部留下一个空隙所以我不能在 CSS 中使用 width:100%
,如果我使用 height:100%
,肖像图像的高度也会出现同样的问题。
如果图像的高度大于宽度(例如 style.width='100%'
) 和 height
如果宽度大于高度。我正在寻找简单性,我不介意使用 jQuery 解决方案,但我真的不熟悉 jQuery。只要纵横比保持不变,如果图像被裁剪掉边缘,我也没有问题。
附件是Screenshot我正在描述的情况。
相关代码如下:
<?php $thumbnail = '';
$post_image_id = get_post_thumbnail_id($post_to_use->ID);
if ($post_image_id) {
$thumbnail = wp_get_attachment_image_src( $post_image_id, 'post-thumbnail', false);
if ($thumbnail) (string)$thumbnail = $thumbnail[0];
}
if (!empty($thumbnail)) { ?>
<div class="item" id="post-<?php the_ID(); ?>">
<img class="background" src="<?php echo $thumbnail; ?>" onload="changeWidth(this);">
<div class="date">
<?php the_date(); ?>
</div>
CSS:
.item, .no-thumbnail{
width:380px;
height:400px;
margin:5px 0px;
border:1px solid black;
float:left;
position:relative;
margin:5px;
display:inline;
}
.item img.background{
position:absolute;
left:0px;
z-index:-500;
width:150%;
}
最佳答案
由于您在网格中显示缩略图和文本,因此既好又简单的方法是使所有缩略图的大小相同。您可以在生成缩略图时 trim 照片,或者使用 css 隐藏其余照片。这将使您的网格看起来更干净,并且如果文本和照片都排成一行,则眼睛会更舒服。
如果您仍想显示整个缩略图,可以使用 CSS/javascript/jQuery 在将鼠标悬停在网格中的“固定大小”缩略图上时显示它。
编辑:创建了一个例子来展示clipping centered thumbnails of different orientation/aspect ratios .只需要一个容器(主要是设置图库的宽度),和<a href="..." style="background-image: url(...);"></a>
以显示缩略图并提供完整照片的链接。
在这个例子中我没有包括标题和摄影师。 <a />
标记充当容器 - 应该可以在其中添加文本,然后根据需要定位它。
关于javascript - 基于图像方向自动应用高度/宽度属性的 CSS/Javascript 解决方案,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9140945/