使用 calc ( ) 的网格缩略图/项目大小

Posted 2023-03-29

【中文标题】使用 calc ( ) 的网格缩略图/项目大小

【英文标题】：Grid thumbnail / item size using calc ( )

【发布时间】：2015-03-28 04:59:52

【问题描述】：

我正在尝试创建一个全宽响应式投资组合网格。我使用 calc() 设置项目的宽度，并使用以下方法设置缩略图占缩略图 div 的 100%：

  `img.attachment-portfolio-thumb
    width:100% !important;
    height:100% !important;
`

这可行，除了每个图像下方大约有一个额外的白色 10 像素，在每个 div.portfolio-list 内，我无法弄清楚它来自哪里以及如何摆脱它。在“检查元素”中，当将鼠标悬停在 div.portfolio-list 上时，div 会占用 100% 的整个空间，因此是 div 内部的某些东西导致了额外的空间。 我注意到的是，在“检查元素”模式下，<a> 标签（在 Pods 模板中的投资组合缩略图缩略图中）具有以下尺寸 - 如果是其中的一部分，还有白色的额外空间：315px x 26px （315px 是 div.portfolio-list 的宽度作为这个浏览器的宽度）。

链接到视觉图像：左边是悬停的，你可以看出覆盖包括底部空的 10 像素。右下角您会看到一条白色条带。 http://prntscr.com/5yedsp

下面是网格的代码：

Pod 模板：

<div class="portfolio-list">
   <div class="overlay">
   <p><a href="@permalink">@post_title</a></p>
   <a href="@permalink">@post_thumbnail.portfolio-thumb</a>
   </div>

php：

<section class="portfolio_home_inner">
<section class="portfolio_home">
<?php
    echo do_shortcode ('[pods name="portfolio" template="portfolio-list"]');
?>

/ Add Image size for Portfolio List
if ( function_exists( 'add_theme_support' ) )  
add_theme_support( 'post-thumbnails' );
// additional image sizes
add_image_size('portfolio-thumb', 300, 300, true ); // (cropped)

CSS：

    div .portfolio-list
    float:left;
    width: calc(20%);
    overflow: hidden;
    position: relative;
    display: inline-block;


/*Wordpress default selector for new image size*/
    img.attachment-portfolio-thumb
    width:100% !important;
    height:100% !important;


div .portfolio-list p
    display: none;
    color:#000;



div .overlay:hover:after 
    content: ' ';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(234,79,38,.85);

有人知道是什么原因导致图片下方多出 10px 吗？

谢谢！

【参考方案1】：

对于“.image_pic”类，您的图像上有 32px 0 15px 的边距（使用 chrome 检查元素）。设置 image_pic "margin-bottom : 0;"应该为你整理一下，也许用重要的标签。