WordPress的博客主頁CSS問題

我試圖設置博客文章精選圖像大小是一致的the main blog page。WordPress的博客主頁CSS問題

我調整了這個代碼：

HTML：

<div class="featured-image-excerpt"> 
    <img class="attachment-post-thumbnail size-post-thumbnail wp-post-image" src="http://mrodriguez.wpengine.netdna-cdn.com/wp-content/uploads/2016/10/Infographic.-7-blog-post.png" alt="infographic-7-blog-post" srcset="http://mrodriguez.wpengine.netdna-cdn.com/wp-content/uploads/2016/10/Infographic.-7-blog-post.png 2480w, http://mrodriguez.wpengine.netdna-cdn.com/wp-content/uploads/2016/10/Infographic.-7-blog-post-98x300.png 98w, http://mrodriguez.wpengine.netdna-cdn.com/wp-content/uploads/2016/10/Infographic.-7-blog-post-768x2341.png 768w, http://mrodriguez.wpengine.netdna-cdn.com/wp-content/uploads/2016/10/Infographic.-7-blog-post-336x1024.png 336w" sizes="(max-width: 2480px) 100vw, 2480px" width="2480" height="7558"> 
</div>

CSS

.attachment-post-thumbnail { 
    height: 460px; 
    width: 100%; 
}

但是現在，你可以訪問該頁面看到，信息圖表功能的圖像被壓扁的主要博客頁面。

我想要做的是在460像素處截取圖像，而不是讓它變得適合460px（用於主博客頁面）。換句話說，精選的圖片摘錄應該在460px處截取。

爲什麼這不起作用？什麼會？

預先感謝您。

來源

2016-10-25 user3117275

一個可能的CSS唯一的解決辦法是設置你給的圖像包裝DIV，而不是尺寸並設置overflow: hidden;切斷圖像，例如：

.featured-image-excerpt { 
    height: 460px; 
    width: 100%; 
    overflow: hidden; 
} 
.attachment-post-thumbnail { 
    width: 100%; 
}

隨着去除height從它應該工作的圖像規則。

來源

2016-10-25 20:06:50 andreas

工作就像一個魅力！謝謝。 – user3117275

不客氣，很高興能幫到您 – andreas

您應該考慮在精選圖片上添加一篇帖子鏈接。很多人會點擊圖片進入帖子。只是一個想法。 –

使用add_image_size函數在您的functions.php文件中添加一個新的圖像大小。在這種情況下，添加以下代碼：

add_image_size('custom-size', 240, 180, true);

這將設置240x180的圖像大小並將圖像裁剪爲大小。給它一個名字「自定義大小」。

要然後使用這個在你的頁面，你會做到這一點：

<div class="featured-image-excerpt"> 
<?php the_post_thumbnail('custom-size'); ?> 
</div>

您可能還需要重新生成所有的縮略圖，你可以做到這一點使用許多可用的插件之一。

來源

2016-10-25 20:08:24

WordPress的博客主頁CSS問題

回答

相關問題