0
私は複数の画像ブロックを持つサイト上のセクションを持っています。私は複数の行を持つ2つの列を持っています。何らかの理由で、マージンと幅がこれらの画像に適用されていません。私のメディアクエリに次のコードがあります。viewportは640px以下です。ページの角をドラッグすると、画像のサイズはまったく変わりません。また、左の画像はマージンで移動するのではなく、その場にとどまります。画像が幅の設定に適合していません
viewportが640px以下のサイトスポンサーの下にあります。
画像が拡大しない原因は、heightとです。
あなたは私がパーセント基準で定義されている画像widthを持って見ることができるように：
.b_250 img {
width: 55%;
height: auto;
}
.b_250 iframe {
width: 55%;
height: auto;
}
と同様に定義されたマージン：
.sponsors {
width: 100%;
margin: 0 2.5%;
}
誰もが私が間違っているのか見ていますか？あなたはその後、埋めるために100％に画像の幅を増やすことができ
#sponsor-left a > img { margin: 0 auto; }
た時点で（私はセレクタでのIDの使用を避けることを好むが）これを追加し、広告を中央に
<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%;
}
}
イメージをcにしますか？入力し、自動応答？ –
640pxのビューポートに2列分の画像があり、それらの画像が自動応答するようにしたい。\ – Paul