Wordpress 将图像宽度设置为 100% 并将最大宽度设置为插入宽度答案

【问题标题】：Wordpress set image width to 100% and set max width to inserted widthWordpress 将图像宽度设置为 100% 并将最大宽度设置为插入宽度
【发布时间】：2018-10-19 16:25:36
【问题描述】：

我希望能够将我的 Wordpress 主题中的图像设置为具有 100% 的宽度和在将图像插入页面或帖子时设置的任何值的最大宽度。我可以逐个图像地执行此操作，但您可以想象那将是多么乏味。有没有办法在我的 css 或函数文件中做到这一点？谢谢！

【问题讨论】：

请从您的代码中添加相关的 sn-ps，以说明您到目前为止所尝试的内容。
我唯一尝试过的是添加 width:100% 和 max-width:inherit;到我的css文件。例如，如果我将图像插入页面，并将该图像的宽度设置为 200 像素，我希望 css 将图像的宽度设置为 100%，最大宽度设置为 200 像素，这就是为什么我不确定这是否应该通过functions.php或css文件来完成
我想我现在明白你想要什么了。我将发布如何使用 css 解决此问题的答案。

标签： css wordpress width responsive

【解决方案1】：

<style>

img {
width: 100%;
}



</style>

这应该可以工作

【讨论】：

谢谢，但这并不是我想要的。例如，如果我将图像插入页面，并将该图像的宽度设置为 200 像素，我希望 css 将图像的宽度设置为 100%，最大宽度设置为 200 像素，这就是为什么我不确定这是否应该通过functions.php或css文件来完成。
好的，如果你把你的css发给我，我可以帮你。

【解决方案2】：

因此，首先您必须列出您将在您的网站中使用的尺寸。以后你也可以随心所欲。

假设您有 3 种类型的图像。缩略图，中号和大号。缩略图最大为 200 像素宽。中等最大宽度为 500 像素。大的最大宽度为 1000 像素。以此类推。

现在将这些类型添加到您的 css 文件中（您可以随意命名它们）：

.thumbnailImg {
   width: 100%;
   max-width: 200px;
}

.mediumImg {
   width: 100%;
   max-width: 500px;
}

.largeImg {
   width: 100%;
   max-width: 1000px;
}

.whateverElseYouNeed {
    ...
}

现在要将这些应用于您通过 wordpress 添加的图像：在编辑器中添加图像时，单击图像选项中的“高级选项”。将有一个名为“图像 CSS 类”的选项。在此处输入您为所需宽度设置的名称（thumbnailImg、mediumImg、largeImg 等）

请参阅此内容以供参考： http://techblog.kjodle.net/2014/08/16/add-css-classes-to-images-in-wordpress/

【讨论】：