html - 垂直对齐图片和文字

Question

我在移动设备上正确垂直对齐图片和文本时遇到了一些问题。就是这个页面:

See the example page

在手机上，我希望图片显示为我制作的粉红色线条:

在检查器窗口中，我尝试将填充和边距设置为 0px。但这是行不通的。有人知道如何解决这个问题吗？

图像的 CSS 应该是这样的:

更正:我实际上可以看到 CSS 统计了所有图像

element.style {
}
style.min.css?ver=4.9:1
.w-image-h, .w-image a, .w-image img {
    border-radius: inherit;
    border-color: inherit !important;
    color: inherit !important;
}
style.min.css?ver=4.9:1
img {
    height: auto;
    max-width: 100%;
}
style.min.css?ver=4.9:1
* {
    box-sizing: border-box;
}
img[Attributes Style] {
    width: 300px;
    height: 200px;
}

它与媒体查询有关吗？

Answer 1

在移动设备上，更新图像的宽度。为标签添加一个类 <img class="cls">然后为该类添加宽度。您的图片将符合要求。