响应调整图片大小问题

不知道为什么头图像不正确调整。见http://www.insidemarketblog.com 响应调整图片大小问题

我以为我把它正确的，但标题图片不会调整针对移动设备。有什么建议么？

CSS：

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

HTML：从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>

来源

2014-04-19 user3117275

在css.css的底部添加以下代码

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

这将设置包与在移动的汽车，否则会留下860px。

来源

2014-04-19 06:05:30

不错的解决方案，虽然我会选择400或更高的值。大多数移动设备都具有该分辨率，并且标题图像为400像素，因此，只要窗口小于此大小，就可以调整其大小。 – GolezTrol

@GolezTrol是正确的，我已经更新我的答案。 –

就像一个魅力!!!!!!谢谢。 – user3117275

删除宽度和高度。 ~~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/

来源

2014-04-19 06:03:37

试过了。不起作用。另外，文章中的'SEO'图片也有宽度和高度。而你的陈述是不正确的。内联*样式属性*优先于您在CSS中定义的样式。在这种情况下，宽度和高度属性被指定，这对于'img'元素是很常见的。 – GolezTrol

你说得对。我已经更新了我的答案。 –

添加这些样式

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; 
} 

}

来源

2014-04-19 06:09:11 4dgaurav

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

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

请检查fiddle

来源

2014-04-19 06:10:54 Parixit

这个解决方案的唯一问题是它将图像拉伸到860像素的100％，并且我希望图像初始为400宽度。我实施了这个改变，你可以看到结果。 – user3117275

@ user3117275更新了答案。现在检查。我把这个图像缩放到了全尺寸。但恢复了它。 – Parixit

感谢您的更新。 – user3117275

修改CSS这个

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

来源

2014-04-19 06:16:21 krish

响应调整图片大小问题

回答

相关问题