css - 如何在自定义 Wordpress 主题中调整特定图像的大小?

标签 css wordpress wordpress-theming custom-wordpress-pages

请注意,我是 wordpress 的新手,如果我问的问题格式不正确或遗漏了细节,我会提前道歉。作为回答者,我会跟进您需要的任何事情。

问题:我的图像溢出了 div、容器等? (我也是 CSS 的新手)在 Wordpress 中。这是图片:enter image description here

我希望它适合图像。另请注意,当鼠标悬停在图像上时,该图像会显示另一个图像。奇怪的是,该图像在调整大小方面没有问题。我尝试了多种解决方案,包括。

img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain
}

而且我已经尝试在媒体页面中编辑图像尺寸。部分问题在于它是自定义主题。当涉及到自定义 CSS(或者我了解到的)时,自定义主题更难使用。非常感谢有关此事的任何建议。如果您有更多详细信息,请告诉我。

最佳答案

你少了一个分号。请添加更多代码,以便人们可以看到您是如何设置图像格式的。

img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

最好制作一个 div,然后将图像作为容器放入其中。

img {
        max-width: 100%;
}
    
.imagecontainer {
      width 50%;
      margin-left: auto;
      margin-right: auto;
}

.imagewrapper {
      width 100%;
}
<div class="imagewrapper">
<div class="imagecontainer">
<img src="/image/olSLV.png">
</div>
</div>

关于css - 如何在自定义 Wordpress 主题中调整特定图像的大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56280400/

相关文章:

mysql - 将长文本转换为日期时间以在 WordPress(MySQL 数据库)中使用

wordpress - 古腾堡 block CSS 不适用于模板部件编辑器中的预览

wordpress - 为所有注册用户(不仅仅是作者)显示简单的公共(public)用户配置文件

html - 如果内容太长,我的页脚将不会留在底部

javascript - 如何在 bxSlider 中为图像添加叠加层

jquery - Bootstrap 空字段验证用于其他验证

php - MySQL 以 "Fatal Error"停止并需要重新启动

php - 如何在 WordPress 中显示所有可用的自定义帖子类别?

jquery - 在 IE7 中,白框似乎覆盖了我们网站上某个点之后的所有内容

jquery - 如何让表格并排显示