响应式图像调整大小问题

Question

不确定为什么标题图片没有正确调整大小。见http://www.insidemarketblog.com

我认为我设置正确，但标题图片不会为移动设备调整大小。有什么建议吗？

CSS：

#thesis_header_image {
    height: auto;
    max-width: 100%;
}
.container_header_image {
    width: 400px;
}

HTML：

<div id="wrap">
<div class="container_header_image">
<div class="text_box">
<a href="http://www.insidemarketblog.com">
<img id="thesis_header_image" width="400" height="87" src="http://www.insidemarketblog.com/wp-content/uploads/2014/03/logo_header1.png" alt="Inside Market Strategy header image" title="click to return home">
</a>
</div>
</div>

Answer 1

在css.css

的底部添加此代码

@media screen and (max-width:400px) {
    #wrap{
        width: auto;
    }
}

这将在手机上设置自动换行，否则将保持860px。

Answer 2

从HTML中删除宽度和高度。 HTML优先于您在CSS中定义的任何内容。

修改

这是一种流动的解决方案。

<强> HTML

<div id="wrap">
    <div class="container-header-image">
        <a href="http://www.insidemarketblog.com">
        <img id="header-image" src="http://www.insidemarketblog.com/wp-content/uploads/2014/03/logo_header1.png" alt="Inside Market Strategy header image" title="click to return home">
        </a>
    </div>
</div>

<强> CSS

#wrap{
    width: 100%;
    background: orange;
}

.container-header-image{
    max-width: 400px;
}

#header-image {
    width: 100%;
}

http://jsfiddle.net/dustindowell/W78b3/

Answer 3

您应该更改容器的宽度。您甚至不需要media查询。

#thesis_header_image {
    height: auto;
    max-width: 100%;
}
.container_header_image {
    width: 100%;
}

请检查fiddle

Answer 4

将您的CSS修改为此

media="screen, projection"
@media screen and (max-width: 400px)
#wrap, .container_header_image {
width: auto;
}

Answer 5

添加这些样式

media="screen, projection"
@media (max-width: 450px)
.header {
   padding-right: 0;
   padding-left: 0; 

#wrap {
   width: 100%;
}

.container_header_image {
   width: 100%;
}

#thesis_header_image {
width: 100% !important;
max-width: 400px;
height: auto;
}

}