I have met a strange problem. I am writing my blog post in Markdown. Occasionally, I need to include images and control and image size using HTML. I just include some HTML tags in Markdown. My code is like the following:
<p align="center">
<img src="https://blog-resource-1257868508.cos.ap-hongkong.myqcloud.com/20181225231628.png" width="200">
</p>
I found that setting the width attribute works as expected, but if I only set up the height attribute, the height attribute is ignored by the browser (tested both on chrome and safari).
I.E., the following HTML code does not work in setting up image height:
<p align="center">
<img src="https://blog-resource-1257868508.cos.ap-hongkong.myqcloud.com/20181225231430.png" height="200">
</p>
An example page is shown here. The first image is using height attribute only (height="200"), and the other images are using only width attribute (widht="200"). You can check the source code of the page to verify that.
The strange thing is that if I download the webpage and open it locally, all the images are resized according to the height or width attribute.
My hugo version is 0.62 and I am using the even theme.
My config for Hugo and even theme is as follows:
baseURL = "https://jdhao.github.io/"
theme = "even"
# languageCode is used for rss generation,
# see https://github.com/gohugoio/hugo/issues/349
languageCode = "en-us"
# do not change `en` to `en-US`, this is defined under
# even/i18n/en.yaml, so the name must be `en`
# en / zh-cn / ... (This field determines which i18n file to use)
defaultContentLanguage = "en"
title = "jdhao's blog"
enableRobotsTXT = true
enableEmoji = true
footnoteReturnLinkContents = "⏎"
# Syntax highlighting by Chroma. NOTE: Don't enable `highlightInClient` and `chroma` at the same time!
# pygmentsOptions = "linenos=table"
pygmentsCodefences = true
pygmentsUseClasses = true
pygmentsCodefencesGuessSyntax = true
# do not change taxonomy name to lower case
preserveTaxonomyNames = true
# forbid transform character to lower case in url
disablePathToLower = true
hasCJKLanguage = true # has chinese/japanese/korean ? # 自动检测是否包含 中文\日文\韩文
paginate = 20 # 首页每页显示的文章数
disqusShortname = "" # disqus_shortname
googleAnalytics = "" # UA-XXXXXXXX-X
copyright = "jdhao" # default: author.name ↓ # 默认为下面配置的author.name ↓
[author] # essential # 必需
name = "jdhao"
[permalinks]
post = "/:year/:month/:day/:filename/"
# use fileModTime first for lastmod,
# see https://gohugo.io/getting-started/configuration/#configure-dates
[frontmatter]
lastmod = ["lastmod", ":fileModTime", ":default"]
[sitemap] # essential # 必需
changefreq = "weekly"
priority = 0.5
filename = "sitemap.xml"
[markup]
defaultMarkdownHandler = "blackfriday"
[markup.goldmark]
[markup.goldmark.renderer]
unsafe = true
#######################################################################
# theme configurations #
#######################################################################
[[menu.main]] # config your menu # 配置目录
name = "Home"
weight = 10
identifier = "home"
url = "/"
[[menu.main]]
name = "Archives"
weight = 20
identifier = "archives"
url = "/post/"
[[menu.main]]
name = "Tags"
weight = 30
identifier = "tags"
url = "/tags/"
[[menu.main]]
name = "Categories"
weight = 40
identifier = "categories"
url = "/categories/"
[params]
version = "4.x" # Used to give a friendly message when you have an incompatible update
debug = false # If true, load `eruda.min.js`. See https://github.com/liriliri/eruda
since = "2017" # Site creation time # 站点建立时间
# site info (optional) # 站点信息（可选，不需要的可以直接注释掉）
logoTitle = "jdhao's blog" # default: the title value # 默认值: 上面设置的title值
keywords = ["Hugo", "theme","even"]
description = "A blog for the patient and curious people"
# paginate of archives, tags and categories
# 归档、标签、分类每页显示的文章数目，建议修改为一个较大的值
archivePaginate = 20
# show 'xx Posts In Total' in archive page ? # 是否在归档页显示文章的总数
showArchiveCount = true
# The date format to use; for a list of valid formats, see https://gohugo.io/functions/format/
dateFormatToUse = "2006-01-02"
# show word count and read time ? # 是否显示字数统计与阅读时间
moreMeta = true
# 一些全局开关，你也可以在每一篇内容的 front matter 中针对单篇内容关闭或开启某些功能，在 archetypes/default.md 查看更多信息。
# Some global options, you can also close or open something in front matter for a single post, see more information from `archetypes/default.md`.
toc = true # 是否开启目录
autoCollapseToc = true # Auto expand and collapse toc # 目录自动展开/折叠
fancybox = true # see https://github.com/fancyapps/fancybox # 是否启用fancybox（图片可点击）
mathjax = true # see https://www.mathjax.org/ # 是否使用mathjax（数学公式）
mathjaxEnableSingleDollar = true # 是否使用 $...$ 即可進行inline latex渲染
mathjaxEnableAutoNumber = true # 是否使用公式自动编号
postMetaInFooter = true # contain author, lastMod, markdown link, license # 包含作者，上次修改时间，markdown链接，许可信息
linkToMarkDown = false # Only effective when hugo will output .md files. # 链接到markdown原始文件（仅当允许hugo生成markdown文件时有效）
# e.g. '<a rel="license noopener" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank">CC BY-NC-ND 4.0</a>'
contentCopyright = '<a rel="license noopener" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank">CC BY-NC-ND 4.0</a>'
changyanAppid = "" # Changyan app id # 畅言
changyanAppkey = "" # Changyan app key
livereUID = "" # LiveRe UID # 来必力
baiduPush = true # baidu push # 百度
baiduAnalytics = "" # Baidu Analytics
baiduVerification = "" # Baidu Verification
googleVerification = "HTz0VHxqny_b0FfS774dICLBzHGBZCb_S11j_akF1Tw" # Google Verification # 谷歌
# Link custom CSS and JS assets
# (relative to /static/css and /static/js respectively)
customCSS = []
customJS = []
[params.publicCDN] # load these files from public cdn # 启用公共CDN，需自行定义
enable = true
jquery = '<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>'
slideout = '<script src="https://cdn.jsdelivr.net/npm/slideout@1.0.1/dist/slideout.min.js" integrity="sha256-t+zJ/g8/KXIJMjSVQdnibt4dlaDxc9zXr/9oNPeWqdg=" crossorigin="anonymous"></script>'
fancyboxJS = '<script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.js" integrity="sha256-XVLffZaxoWfGUEbdzuLi7pwaUJv1cecsQJQqGLe7axY=" crossorigin="anonymous"></script>'
fancyboxCSS = '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.css" integrity="sha256-7TyXnr2YU040zfSP+rEcz29ggW4j56/ujTPwjMzyqFY=" crossorigin="anonymous">'
timeagoJS = '<script src="https://cdn.jsdelivr.net/npm/timeago.js@3.0.2/dist/timeago.min.js" integrity="sha256-jwCP0NAdCBloaIWTWHmW4i3snUNMHUNO+jr9rYd2iOI=" crossorigin="anonymous"></script>'
timeagoLocalesJS = '<script src="https://cdn.jsdelivr.net/npm/timeago.js@3.0.2/dist/timeago.locales.min.js" integrity="sha256-ZwofwC1Lf/faQCzN7nZtfijVV6hSwxjQMwXL4gn9qU8=" crossorigin="anonymous"></script>'
flowchartDiagramsJS = '<script src="https://cdn.jsdelivr.net/npm/raphael@2.2.7/raphael.min.js" integrity="sha256-67By+NpOtm9ka1R6xpUefeGOY8kWWHHRAKlvaTJ7ONI=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/flowchart.js@1.8.0/release/flowchart.min.js" integrity="sha256-zNGWjubXoY6rb5MnmpBNefO0RgoVYfle9p0tvOQM+6k=" crossorigin="anonymous"></script>'
sequenceDiagramsCSS = '<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/bramp/js-sequence-diagrams@2.0.1/dist/sequence-diagram-min.css" integrity="sha384-6QbLKJMz5dS3adWSeINZe74uSydBGFbnzaAYmp+tKyq60S7H2p6V7g1TysM5lAaF" crossorigin="anonymous">'
sequenceDiagramsJS = '<script src="https://cdn.jsdelivr.net/npm/webfontloader@1.6.28/webfontloader.js" integrity="sha256-4O4pS1SH31ZqrSO2A/2QJTVjTPqVe+jnYgOWUVr7EEc=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/snapsvg@0.5.1/dist/snap.svg-min.js" integrity="sha256-oI+elz+sIm+jpn8F/qEspKoKveTc5uKeFHNNVexe6d8=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/underscore@1.8.3/underscore-min.js" integrity="sha256-obZACiHd7gkOk9iIL/pimWMTJ4W/pBsKu+oZnSeBIek=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/gh/bramp/js-sequence-diagrams@2.0.1/dist/sequence-diagram-min.js" integrity="sha384-8748Vn52gHJYJI0XEuPB2QlPVNUkJlJn9tHqKec6J3q2r9l8fvRxrgn/E5ZHV0sP" crossorigin="anonymous"></script>'
# Display a message at the beginning of an article to warn the readers that it's content may be outdated.
# 在文章开头显示提示信息，提醒读者文章内容可能过时。
[params.outdatedInfoWarning]
enable = false
hint = 30 # Display hint if the last modified time is more than these days ago. # 如果文章最后更新于这天数之前，显示提醒
warn = 180 # Display warning if the last modified time is more than these days ago. # 如果文章最后更新于这天数之前，显示警告
[params.gitment] # Gitment is a comment system based on GitHub issues. see https://github.com/imsun/gitment
owner = "" # Your GitHub ID
repo = "" # The repo to store comments
clientId = "" # Your client ID
clientSecret = "" # Your client secret
[params.gitalk] # Gitalk is a comment system based on GitHub issues. see https://github.com/gitalk/gitalk
owner = "" # Your GitHub ID
repo = "" # The repo to store comments
clientId = "" # Your client ID
clientSecret = "" # Your client secret
[params.flowchartDiagrams] # see https://blog.olowolo.com/example-site/post/js-flowchart-diagrams/
enable = false
options = ""
[params.sequenceDiagrams] # see https://blog.olowolo.com/example-site/post/js-sequence-diagrams/
enable = false
options = "" # default: "{theme: 'simple'}"
[params.busuanzi] # count web traffic by busuanzi # 是否使用不蒜子统计站点访问量
enable = true
siteUV = true
sitePV = true
pagePV = true
[params.reward] # 文章打赏
enable = true
wechat = "https://blog-resource-1257868508.cos.ap-hongkong.myqcloud.com/wechat.png" # 微信二维码
alipay = "https://blog-resource-1257868508.cos.ap-hongkong.myqcloud.com/zhifubao.jpg" # 支付宝二维码
[params.social] # 社交链接
# a-email = "mailto:jdhao@hotmail.com"
b-stack-overflow = "https://stackoverflow.com/users/6064933/jdhao?tab=profile"
# c-twitter = "http://localhost:1313"
# d-facebook = "http://localhost:1313"
# e-linkedin = "http://localhost:1313"
# f-google = "http://localhost:1313"
g-github = "https://github.com/jdhao"
# h-weibo = "http://localhost:1313"
# i-zhihu = "http://localhost:1313"
# j-douban = "http://localhost:1313"
# k-pocket = "http://localhost:1313"
# l-tumblr = "http://localhost:1313"
# m-instagram = "http://localhost:1313"
# 将下面这段配置取消注释可以使 hugo 生成 .md 文件
# Uncomment these options to make hugo output .md files.
#[mediaTypes]
# [mediaTypes."text/plain"]
# suffix = "md"
#
#[outputFormats.MarkDown]
# mediaType = "text/plain"
# isPlainText = true
# isHTML = false
#
#[outputs]
# home = ["HTML", "RSS"]
# page = ["HTML", "MarkDown"]
# section = ["HTML", "RSS"]
# taxonomy = ["HTML", "RSS"]
# taxonomyTerm = ["HTML"]