WordPress中的图像不可调整大小，但它适用于其他平台

Question

我在wordpress上有网页，我已经写了一些代码。在网页的右侧，我存储了图像。我希望它们的宽度为 300px，但是当我更改宽度或其他任何内容时，它似乎不起作用。

我认为由于wordpress，图像目前具有随机大小。在jsfiddle等其他平台上，我可以毫无问题地更改大小。

当我移动图像时，图像大小只会发生变化，这样看起来真的很糟糕。当我想将 .imageright 更改为 500 像素时，没有任何变化。 有人知道解决方案是什么吗？

PLNKR ： https://plnkr.co/edit/5HQy89zapAVysoVDS06Z?p=preview (最好整页查看(

文字新闻：http://giscience.zgis.at/de/concept-projekte-page/

<style>
.Capital {
margin: 0px 0 -5px 0;
line-height: 63px;
font-size: 60px;
font-weight: ligter;
}
.smalltext {
text-align: center;
margin-top: 0px !important;
font-weight: 100px;
font-size: 14px;
}
.square {
border-radius: 25px;
background: #73B7DB;
padding: 20px;
width: 100px;
height: 100px;
text-align: center;
color: #fff;
font-family: Arial;
padding-top: 10px;
text-decoration: none;
}
.left {
width: 30%;
margin: 05% 00% 00% 05%;
}
.container {
float: left;
margin: 0 auto;
width: 100%;
display: flex;
}
.paragraphs {
margin: 5% 10% 2% 00%;
width: 40%;
}
.right {
width: 30%;
float: right;
margin: 02% 00% 0% 00%;
}
.imageright {
width: 300px;
}
</style>



<div class="container">
<div class="left">
<div class="square"><span class="Capital">M</span>
<br><span class="smalltext">Methods</span></div>
</div>
<div class="paragraphs">
Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem
IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem
</div>
<div class="right">
<img class="imageright" src="http://ideaslab.sbg.ac.at/ideaslab/wp-content/uploads/2017/07/why300x200-300dpi.jpg" />
</div>
</div>

Answer 1

Wordpress 会自动调整图像大小。当您将其嵌入到您的帖子中时，您选择了中(300px(或类似的东西(如果您在Wordpress前端查看图像URL，您将在URL上看到它不是原始的。

如果您从帖子编辑器编辑图像，则其中有一个名为"图像大小"的选项。将其设置为完整大小，它将是应尊重您的CSS的原始图像。

您可以在"设置"-"媒体"中设置默认大小调整大小 ->。

Answer 2

在WordPress中应用自定义样式可能很棘手，因为这完全取决于何时加载WordPress主题的样式表。

要知道您的width : 300px;是否已成功应用.imageright，只需在浏览器上按 F12，然后检查此图像具有的所有属性。

• 如果您可以看到此行带有划线，则表示这些属性已被以您的身份调用的另一个属性覆盖。
• 如果您看不到您的线路，则表示您的<style>未应用。您可以尝试访问WordPress主题的CSS文件并将您的类添加到其中，以确保它将被调用，但这将意味着一些主题修改，这可能会对您网站上的其他元素产生影响，因此请小心使用此解决方案。

我希望这对你有帮助。