时间戳

首页 > 解决方案 > 如何在 Betheme Masonry 博客样式中设置和显示原始尺寸（未裁剪）的图像？

css - 如何在 Betheme Masonry 博客样式中设置和显示原始尺寸（未裁剪）的图像？

问题描述

我在我的 wordpress 网站上使用 Betheme，我在博客文章中使用它的 Masonry Blog Style（这是强制性的）。博客页面上显示的内容的图像（特色图像）是随机大小的，如 monsory 博客样式中定义的那样。

但我希望博客页面上显示的所有图像都应该是全尺寸。

Betheme Monsory 博客风格供参考 https://themes.muffingroup.com/be/theme/blog/masonry-blog-style/?mfn-s

我已应用自定义 CSS 来更改显示图像的包装器/div 的大小。

用于博客风格主题的包装器。

<html>
<div class="image_frame post-photo-wrapper scale-with-grid images_only">
   <div class="image_wrapper">
      <a href="http://*******.com/2019/05/15/123/">
         <div class="mask"></div>
         <img width="960" height="750" src="http://*******.com/wp-content/uploads/2019/05/z1s969obmsu11-960x750.jpg" class="scale-with-grid wp-post-image" alt="" srcset="http://*******.com/wp-content/uploads/2019/05/z1s969obmsu11-960x750.jpg 960w, http://*******.com/wp-content/uploads/2019/05/z1s969obmsu11-1280x1000.jpg 1280w" sizes="(max-width: 960px) 100vw, 960px">
      </a>
      <div class="image_links double"><a href="http://*******.com/wp-content/uploads/2019/05/z1s969obmsu11-429x1024.jpg" class="zoom" rel="prettyphoto">
         <i class="icon-search"></i>
         </a>
         <a href="http://*******.com/2019/05/15/123/" class="link">
         <i class="icon-link"></i>
         </a>
      </div>
   </div>
</div>
</html>

我在主题选项中寻找了选项，但找不到任何可以帮助我解决问题的选项。虽然问题很小，但很重要。

标签： csswordpressthemesmasonry

解决方案

WordPress 有一个名为“完整”的图像大小，它将返回最初上传的图像。

现在，您的主题显示上传图像的调整大小版本。它是z1s969obmsu11-960x750.jpg。如果您使用“完整”图像尺寸，它将是z1s969obmsu11.jpg

如果是 CSS 问题，请使用浏览器的开发人员工具检查主题样式是否超过了您的自定义样式。如果是这样，请提高 CSS 选择器的特异性，或者作为最后的解决方案，使用 !important。

推荐阅读