Question

所以我正在设计一个Wordpress主题，我有四个div（380x400），我正在使用帖子中的缩略图作为背景填充，问题是，如果图片是横向的，它会在底部留下空隙因此，如果我使用width:100%，我无法在CSS中使用height:100%，与纵向图像的高度相同。

我想要做的是如果图像的高度大于宽度（例如width）则分配style.width='100%'属性为100％，如果是height则分配<?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>宽度大于高度。我正在寻找简单，我不介意使用jQuery解决方案，但我真的不熟悉jQuery。只要纵横比保持不变，如果图像被边缘裁剪，我也没有问题。

附件是我所描述的情况的Screenshot。

以下是相关代码：

.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%;
 }

CSS：

{{1}}

Answer 1

由于您在网格中显示缩略图和文本，因此这两种简单易用的方法是使所有缩略图的大小相同。您可以在生成缩略图时修剪照片，或使用css隐藏其余部分。这将使您的网格看起来更清晰，如果文本和照片都排成一行，则更容易在眼睛上看。

如果您仍想显示整个缩略图，则可以使用CSS / javascript / jQuery将鼠标悬停在网格中的“固定大小”缩略图上时显示。

编辑：创建了一个显示clipping centered thumbnails of different orientation/aspect ratios的示例。所需要的只是一个容器（主要用于设置图库的宽度），<a href="..." style="background-image: url(...);"></a>都显示缩略图并提供完整照片的链接。

在这个例子中我没有包括标题或摄影师。 <a />标记充当容器 - 应该可以在其中添加文本，然后根据需要进行定位。

CSS / Javascript解决方案，根据图像方向自动应用高度/宽度属性

1 个答案: