我的标题图像没有反应
我的标题图像没有反应
提问于 2015-04-01 14:54:32
我正在为我的网页设计课程制作一个网站，其中一个标准是让它具有响应性(调整内容大小以适应屏幕大小)。因此，在我的网站，因为它是每一个图片和文字段落大小根据屏幕大小从全高清到iPhone大小。除了我的头部图像，它只是锁定在它的位置，当我缩小它，所以当它下降到移动分辨率，我必须滚动到右边，以看到我的图像。
以下是标题图像的HTML和CSS代码：
HTML：
<div class="container_14">
<div class="grid_12">
<a href="index.html">
<p align="center"><img src="images/logo2.png"></p>
</a>
</div>
</div> CSS：
.container_14 {
margin-left: auto;
margin-right: auto;
width: 1200px;
}
.container_14 .grid_12 {
width:97.5%;
height:90px;
}
img {
max-width: 100%;
}链接到我的代码与随机相同大小的图像..。http://jsfiddle.net/hac4cfrn/
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-04-01 15:03:42
如果您想让.container_14适应各种屏幕，但如果有足够的空间，请在1200px width上停留，那么使用@media查询：
.container_14 {
margin-left: auto;
margin-right: auto;
width: 1200px;
}
@media screen and (max-width:1200px){
.container_14 {
width: 100%;
}
}
.container_14 .grid_12 {
width:97.5%;
height:90px;
}
img {
max-width: 100%;
}<header>
<div class="container_14">
<div class="grid_12">
<a href="index.html">
<p align="center"><img src="http://www.tscross.com/sitemap_files/sitemap_banner.png"> </p>
</a>
</div>
</div>
</header>
您还可以为内部图像添加第二个@media查询。没有容器也是可能的。
否则，您只需使用100%作为width。
Stack Overflow用户
发布于 2015-04-01 14:56:43
如果您希望它具有响应性和居中性，则应该将.container_14设置为100%，而不是以像素为单位进行硬编码：
.container_14 {
margin-left: auto;
margin-right: auto;
width: 100%;
}<div class="container_14">
<div class="grid_12">
<a href="index.html">
<p align="center"><img src="http://www.tscross.com/sitemap_files/sitemap_banner.png"></p>
</a>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29394094
复制相关文章
相似问题
腾讯云开发者
