Question

我在wordpress中有网页，我已经写了一些代码。在网页的右侧，我存储了图像。我希望它们的宽度为300px，但是当我更改宽度或其他任何东西时，它似乎无法正常工作。

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

图像尺寸仅在我移动图像时发生变化，而且看起来非常糟糕。当我想将.imageright改为500像素时，一切都没有改变。任何人都知道解决方案可能是什么？

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

wordpress：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上看到它不是原始的。

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

您可以在“设置”中设置默认调整大小 - ＆gt;媒体。

Answer 2

在 WordPress 中应用自定义样式可能会非常棘手，因为它取决于加载 WordPress 主题的样式表的时间。

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

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

我希望这会对你有所帮助。

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

2 个答案: