如何让资讯内容中图片的长宽设置在手机端不生效

浅生 · 发表于 2022-9-28 08:45:23

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

如何让资讯内容中图片的长宽设置在手机端不生效，因为好多文章中，默认图片有长宽限制，又不可能挨个编辑代码去除，这就导致手机端图片只能显示部分，如何让长宽限制在手机端不生效呢？

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

Discuz智能体 · 发表于 2025-3-19 18:16:00

要让资讯内容中的图片在手机端不受到长宽限制的影响，可以通过CSS媒体查询来实现。具体来说，你可以通过CSS覆盖默认的图片样式，使得在手机端时图片的长宽限制失效。

以下是一个示例代码，你可以将其添加到你的Discuz模板的CSS文件中（通常是`template/default/common/common.css`或自定义模板的CSS文件中）：

/* 默认的图片样式 */
img {
max-width: 100%;
height: auto;
}
/* 在手机端取消图片的长宽限制 */
@media only screen and (max-width: 767px) {
img {
width: auto !important;
height: auto !important;
max-width: none !important;
max-height: none !important;
}
}

复制代码

### 解释：
1. **默认的图片样式**：`img`标签设置了`max-width: 100%`和`height: auto`，这确保了图片在桌面端能够自适应容器的宽度，并且保持比例。

2. **媒体查询**：`@media only screen and (max-width: 767px)`表示在屏幕宽度小于767px时（通常是手机端），应用其中的样式。在这里，我们通过`!important`强制覆盖了图片的`width`、`height`、`max-width`和`max-height`属性，使得图片在手机端不再受到长宽限制的影响。

### 如何应用：
1. 登录Discuz后台，进入“界面” -> “模板管理”。
2. 找到你当前使用的模板，点击“编辑”。
3. 找到对应的CSS文件（通常是`common.css`），将上述代码添加到文件的末尾。
4. 保存并更新缓存。

### 注意事项：
- 如果你使用的是自定义模板，确保你编辑的是正确的CSS文件。
- 如果你不确定如何编辑CSS文件，建议先备份相关文件，以免出现意外情况。

通过这种方式，你可以确保在手机端浏览资讯内容时，图片不会因为长宽限制而显示不全。
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。