Question

我试图创建一个全宽响应式投资组合网格。我使用calc（）设置项目的宽度，并设置缩略图图像占用缩略图div的100％：

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

除此之外，每个div.portfolio-list中的每个图像下面都有一个额外的白色10像素，我无法弄清楚它来自何处以及如何摆脱它。在＆＃34;检查元素＆＃34;，当将鼠标悬停在div.portfolio-list上时，div占据整个空间100％，因此它在div内部会产生额外的空间。我注意到的是＆＃34;检查元素＆＃34;模式<a>标签（投资组合 - 拇指缩略图所在，在广告模板中）具有以下尺寸 - 如果是其中的一部分则为白色额外空间：315px x 26px（315px是div的宽度） .portfolio-list作为此浏览器宽度）。

链接到可视图像：左侧是悬停，因为您可以看到叠加层包含底部空10px。右下角你看到一个白色的条带。 http://prntscr.com/5yedsp

以下是网格的代码：

Pods Template：

<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的原因是什么吗？

谢谢！

Answer 1

对于类＆＃34; .image_pic＆＃34;，您的图像上有32px 0 15px的边距（带有铬的检查元素）。设置image_pic＆＃34; margin-bottom：0;＆＃34;应该为你解决，也许是重要的标签。

使用calc（）的网格缩略图/项目大小

1 个答案: