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

CSS/Javascript Solution to automatically apply height/width attributes based on image orientation

本文关键字：应用 高度 属性 方向 图像 解决方案 Javascript CSS      更新时间：2023-09-26

所以我正在设计一个Wordpress主题，我有四个div（380x400），我使用帖子中的缩略图作为背景，问题是，如果图片是横向的，它会在底部留下一个间隙，所以我不能在CSS中使用width:100%，如果我使用height:100%，肖像图像的高度也会出现同样的问题。

我想做的是，如果图像的高度大于宽度（例如style.width='100%'），则分配100%的width属性，如果宽度大于高度，则分配height属性。我追求简单，我不介意使用jQuery解决方案，但我真的不熟悉jQuery。如果图像从边缘裁剪下来，只要纵横比保持不变，我也没有问题。

附件是我描述的情况的屏幕截图。

这是相关代码：

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

由于您在网格中显示缩略图和文本，因此使所有缩略图大小相同是既好又简单的方法。你可以在生成缩略图时修剪照片，也可以用css隐藏其余部分。这将使你的网格看起来更干净，如果文字和照片都排成一行，对眼睛来说也更容易。

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

编辑：创建了一个示例来显示不同方向/纵横比的以剪切为中心的缩略图。它只需要一个容器（主要用于设置图库的宽度），<a href="..." style="background-image: url(...);"></a>既可以显示缩略图，也可以提供完整照片的链接。

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

相关文章：