Question

我遇到了使用CMS（WYSIWYG编辑器）在特定块中更新内容的问题。

特定区块内的图像和文字不会以不同的分辨率自动调整大小（例如移动浏览器或调整大小的浏览器窗口）

为了您的信息，CMS允许我使用HTML和内联样式。我尝试使用百分比而不是固定大小，但它无法正常工作。我看到一些解决方案建议使用jquery或外部样式表。

我想知道有没有办法可以使用内联样式进行自动调整大小（响应）？

请告知。

Answer 1

在宽度块内设置图像和文本的样式：100％！important。检查页面呈现的第一个和最后一个样式是什么，如果你想让你的页面响应而不使用内联样式，请使用媒体查询css。

Answer 2

您必须在课程和图像中定义百分比。请参阅CSS代码作为示例：

<style type="text/css">
<!-- For left column -->
.single_image_left {
border-radius: 10px;
width: 50%;
}
.single_image_left img {
width: 96%;
}

<!-- For right column -->
.single_image_right {
border-radius: 10px;
width: 50%;
}
.single_image_right img {
width: 96%;
}
</style>

Answer 3

同时尝试使用最大宽度和百分比宽度，这样您的图片就不会比您想要的更大：

<div style="max-width:600px;width100%!important;">
  <img src="myimage.png" style="max-width:250px;width100%!important;">
  <p>Some text</p>
</div>

用于自动调整大小的内联样式

3 个答案: