图像不适应宽度集

我在一个网站上有一个部分，我有多个图像块。我有两列多行。由于某些原因，边距和宽度不适用于这些图像。我的媒体查询中有以下代码，其中viewport为640px或更少。每当您拖动页面的角落时，图像的大小都不会缩放。此外，左侧的图像保持原位，而不是随着边距移动。图像不适应宽度集

它被称为网站赞助商在viewport 640像素或更少的部分。

是什么导致图像在height和width以及边缘不能缩放？

正如你可以看到我有一个百分比的基础上定义的图像width：

.b_250 img { 
    width: 55%; 
    height: auto; 
} 
.b_250 iframe { 
    width: 55%; 
    height: auto; 
}

还有余量定义：

.sponsors { 
    width: 100%; 
    margin: 0 2.5%; 
}

有谁看到我做错了吗？

<div id="sponsor-left"> 
    <div class="b_250"> 
    <a href="PMC-spray-foam-equipment"><img src="images/Contractor Images/PMC spray foam equipment for sale.jpg"></a> 
    </div> 
    <div class="b_250"> 
    <a href="Green-Insulation-Technologies"><img src="images/Contractor Images/Green Insulation Technology 300x200.jpg"></a> 
    </div> 
    <div class="b_250"> 
    <a href="Sprayworks-Equipment-Group"><img src="images/Contractor Images/Spray foam rigs for sale a series.jpg"></a> 
    </div> 
</div> 
<div id="sponsor-right"> 
    <div class="b_250"> 
    <a href="#"><img src="images/Ad Boxes/300x200.gif" alt=""></a> 
    </div> 
    <div class="b_250"> 
    <a href="#"><img src="images/Ad Boxes/300x200.gif" alt=""></a> 
    </div> 
    <div class="b_250"> 
    <a href="#"><img src="images/Ad Boxes/300x200.gif" alt=""></a> 
    </div> 
    <div class="b_250"> 
    <a href="#"><img src="images/Ad Boxes/300x200.gif" alt=""></a> 
    </div> 
</div> 


.container { 
    width: 100%; 
} 
.content { 
    float: none; 
    text-align: center; 
    width: 100%; 
} 
/*----Second to Last Homepage Article---*/ 
#latestnews { 
    width: 100%; 
    text-align: center; 
} 
#latestnews .latestnews h2{ 
    margin: 10px 5%; 
    font-size: 1.3em; 
    width: 90%; 
} 
#latestnews ul, #latestnews li{ 
    text-align: center; 
} 
#latestnews li{ 
    margin: 0 auto; 
} 
.latestnews img{ 
    margin: 0 auto; 
    text-align: center; 
} 
#latestnews div.latestnews{ 
    float:none; 
    width: 100%; 
} 
#latestnews p { 
    padding: 20px 10px; 
    clear: both; 
} 
#latestnews p.readmore{margin-top:10px; text-align:center;} 



.column .sponsors { 
    width: 100%; 
} 
.column { 
    clear: both; 
    width: 100%; 
    margin: 0 auto; 
} 
.column .sponsors .b_250{ 
    border: none; 
} 
.b_250 img { 
    width: 55%; 
    height: auto; 
} 
.b_250 iframe { 
    width: 55%; 
    height: auto; 
} 
.sponsors { 
    width: 100%; 
    margin: 0 2.5%; 
} 
.sponsors h2{ 
    margin: 10px 5%; 
    font-size: 1.3em; 
    width: 90%; 
    text-align: center; 
} 
#sponsor-left { 
    float: left; 
    width: 45%; 
} 
#sponsor-right { 
    float: right; 
    width: 45%; 
} 

}

来源

2016-03-31 Paul

你想要图像是c输入和自动响应？ –

我希望在640px视口中有两列图像，然后让这些图像自动响应。\ – Paul

要居中的广告，添加这个（虽然我倾向于避免使用的ID中选择）：

#sponsor-left a > img { margin: 0 auto; }

在这一点，那么你可以增加图像的宽度为100％，以填补您为左列和右列声明的宽度。

而且正如我在评论中所指出取出float: right;并更改为display: inline-block;

来源

2016-03-31 05:29:19

不起作用。我的代码仍然在页面中处于活动状态。它和以前完全一样。 – Paul

我假设这将是足够的样式表规范。我宁愿不在速度方面使用CSS中的id，而是使用'＃sponsor-left a> img'作为选择器。下面显示它的截图：https：// gyazo。com/e671bf1162fa6805f3cb773218ae83ee –

我仍然不确定它是否工作，但我怎样才能获得图像宽度扩大？他们仍然没有做任何事情。 – Paul

尝试display:block max-width:100%; height:auto;

图像为中心

必须使用display:block或display:inline-block默认图像display:inline

何w中心？

如果您的图像display:block使用margin-left:auto;和margin-right:auto;

和display:inline-block给text-align:center图像父元素

注意

要小心全图像的CSS没有float:left或float:right

来源

2016-03-31 05:34:48

对于b_250 img div类？ – Paul

把这个CSS放在你想要自动响应的图像上 –

@Paul你希望图像是50％50％，10px的边距？ –

图像不适应宽度集

回答

相关问题