织梦手机站图片高度如何去除?

99ANYc3cd6
预计阅读时长 11 分钟
位置: 首页 织梦建站 正文

最核心、最推荐的方法是 通过CSS来控制,而不是直接修改织梦的模板文件,这样做更灵活,不会因为升级模板或重新生成页面而导致修改失效。


使用CSS覆盖(最推荐,最安全)

这是最佳实践,你只需要修改手机站的CSS样式文件即可。

步骤1:找到手机站的CSS文件

手机站的CSS文件通常位于你的手机站模板目录下,文件名可能是 style.cssmobile.cssmain.css 等,路径一般类似于: /templets/你的手机站目录/style.css

步骤2:添加CSS代码

打开这个CSS文件,在文件末尾添加以下任意一种代码:

方案A:移除所有图片的高度(最彻底)

这个选择器会移除所有 <img> 标签上的 height 属性样式。

/* 移除所有图片的高度 */
img {
    height: auto !important;
}

方案B:只移除特定容器内的图片高度(更精确)

如果你只想去掉文章内容区域或某个特定模块的图片高度,可以使用更具体的选择器,以避免影响到其他地方的图片(比如Logo、图标等)。

只去掉文章内容区域(class 为 article-content)的图片高度:

/* 只去掉文章内容区域内的图片高度 */
.article-content img {
    height: auto !important;
}
/* 或者使用织梦默认的文章内容区 class */
.art_content img {
    height: auto !important;
}

代码解释:

  • img:这是一个CSS选择器,选中页面上所有的 <img>
  • .article-content img:这是一个更具体的选择器,只会选中 class 属性为 article-content 的元素内部的 <img>
  • height: auto;auto 是一个关键字,表示元素的高度由其内容(在这里是图片的原始高度)决定。
  • !important:这是一个优先级标记,它确保这条CSS规则会覆盖掉由织梦系统或其他样式表设置的 height 属性,因为织梦系统可能会直接给 <img> 标签加上 height="xxx" 这样的内联样式,而内联样式的优先级很高,所以需要 !important 来覆盖。

步骤3:清除缓存并刷新

  1. 保存 你修改的CSS文件。
  2. 登录织梦后台。
  3. 进入 “系统” -> “一键更新网站”
  4. 勾选 “更新HTML”“更新CSS”,然后点击 “开始执行”,这一步是为了让织梦重新生成手机站的页面,确保新的CSS样式被正确应用。
  5. 清除你的浏览器缓存,或者使用无痕模式/隐私模式访问手机站,查看效果。

修改织梦模板文件(不推荐,有风险)

如果你发现CSS方法无效(比如图片高度是直接写在HTML标签里的,且CSS无法覆盖),可以尝试修改模板文件。但请注意,这可能会导致在升级模板后修改失效。

歾骤1:找到手机站的列表或内容页模板文件

手机站的模板文件通常位于 /templets/你的手机站目录/ 下。

  • 文章列表页:list_article.htm
  • 页:article_article.htm

步骤2:修改图片调用标签

织梦的图片通常通过 {dede:field name='body'/}{dede:arclist} 等标签调用,你需要找到这些标签内部的具体图片HTML代码。

情况1:修改文章内容页 (article_article.htm)

  1. 打开 article_article.htm 文件。
  2. 找到 {dede:field name='body'/} 这个标签,它负责输出文章正文内容。
  3. 这个标签本身是动态生成内容的,我们不能直接修改它,但我们可以通过织梦的底层字段处理功能来修改。 的字段调用,它可能是 {dede:field.body/},在其后面加上一个函数来处理。

修改前:

{dede:field.body/}

修改后(在 body 后面加上 function='RemoveImgHeight(@me)'):

{dede:field.body function='RemoveImgHeight(@me)'/}
  1. 然后在模板文件的顶部(<head> 标签后面)加入下面的PHP函数代码:
<script language="php">
function RemoveImgHeight($body)
{
    $body = preg_replace("/<img height=[^>]*>/i", "", $body);
    return $body;
}
</script>

这段PHP代码的作用是使用正则表达式,找到所有带有 height 属性的 <img> 标签,并将其整个 height 属性及值移除。

情况2:修改列表页 (list_article.htm)

列表页的图片通常由 {dede:arclist} 标签调用。

找到类似这样的代码:

<img src='{dede:field.litpic/}' width='...' height='...' />

你需要手动删除 height='...' 这部分。

修改后:

<img src='{dede:field.litpic/}' width='...' />

或者直接去掉 width,让CSS来控制:

<img src='{dede:field.litpic/}' />

步骤3:更新生成

和CSS方法一样,修改完模板文件后,需要在后台 “系统” -> “一键更新网站” 中更新对应的HTML页面。


总结与建议

方法 优点 缺点 推荐度
CSS控制 安全、灵活、不影响模板文件,升级模板后依然有效。 需要清除缓存才能看到效果。 ★★★★★ (强烈推荐)
修改模板 直接从源头移除,可能对某些情况有效。 有风险,修改模板后升级会丢失,需要重新修改。 ★☆☆☆☆ (仅在CSS无效时尝试)

强烈建议你首先尝试方法一(CSS控制),这符合现代Web开发的最佳实践,能让你在不破坏模板结构的情况下,轻松控制网站的样式。

-- 展开阅读全文 --
头像
2025计算机二级C语言题库有哪些变化?
« 上一篇 01-08
dede sql arcurl字段值如何正确获取?
下一篇 » 01-08

相关文章

取消
微信二维码
支付宝二维码