html - 使用 CSS 覆盖图像大小

标签 html css image mobile-website

我正在尝试在博客的移动主题中制作图片以适应移动屏幕。我指的是文章中的图片,而不是标题等主题中的图片。

我遇到的一个问题是博客软件会自动添加以像素为单位的高度和宽度。这是源代码的样子:

<div class="leftbox"><img src=".mysite.net/blog/media/Photo/Indian_tourists.jpg" width="400" height="267" alt="Indian tourists" title="Indian tourists" /></div>

我想使用 css 覆盖最大宽度的图像代码:100% 以便在图像大于屏幕尺寸的情况下,它可以修复它。

有人告诉我将以下代码放在移动主题 css 文件的底部。

.post_content img {
height: auto !important;
max-width: 100% !important;
}

我试过这段代码,但不幸的是它没有成功。有人可以帮我吗?

最佳答案

如果你的 div 类是 leftbox 那么你可以在你的 css 文件中使用下面的代码

.leftbox img {
   height: auto !important;
   max-width: 100% !important;
}

关于html - 使用 CSS 覆盖图像大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25925825/

相关文章:

jquery - 在 jQuery 中使用 nth-of-type 选择前十个元素

javascript - 显示 :None destroys the rendering of other jquery objects

html - 使 div 只出现在另一个的事件状态

css - Spring MVC的css、img、js文件的路径应该如何设置?

css - 具有非滚动流体宽度侧边栏的 3 列布局(jsFiddle)

javascript - 为什么 Mootools Multibox 中的图像在第一次显示时会有滚动条?

html - 隐藏了边框半径和溢出的元素不会正确裁剪内容 : 1px issue

html - 如何为具有背景图像的 div 指定百分比高度?

html - OpenLayers 3 - MousePosition 悬停问题

python - 填充轮廓圆