構建2 div與圖片responsiv在html和css

-1

任何人都可以幫助我找到一種方法，使包含圖像響應的2 DIV s。構建2 div與圖片responsiv在html和css

目前，第二個div是第一個低音部分，但我無法弄清楚如何讓他們改變移動和標籤的屏幕大小後的大小。

這裏是我的代碼：

.new_banner_homepage { 
 
     width: 570px; 
 
     float: left; 
 
     min-height: 1px; 
 
     margin-left: 30px; 
 
     margin-bottom: 20px; 
 
     border-radius: 5px; 
 
     box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); 
 
     transition: all 0.2s linear 0s; 
 
     transition-property: all; 
 
     transition-duration: 0.2s; 
 
     transition-timing-function: linear; 
 
     transition-delay: 0s; 
 
    } 
 
    @media only screen and (max-width: 239px) { 
 
     .new_banner_homepage { 
 
     width: 90%; 
 
     } 
 
    }

<div class="new_banner_homepage"> 
 
    <a href="#"> 
 
    <img data-retina="true" src="http://placehold.it/570x150" alt=""> 
 
    </a> 
 
</div> 
 
<div class="new_banner_homepage"> 
 
    <a href="#"> 
 
    <img data-retina="true" src="http://placehold.it/570x150" alt=""> 
 
    </a> 
 
</div>

來源

2015-11-27 benny117

Re移動'.new_banner_homepage {width：570px}'並替換爲'width：25％;' –

您遇到的問題究竟是什麼？您的媒體查詢是否不起作用？在較小的尺寸上你想要的結果是什麼？ –

@ benny117請使用'@ media'標籤。閱讀這裏的文章：http：//www.w3schools.com/cssref/css3_pr_mediaquery.asp –

你在你的HTML頁面添加meta tag

<meta name="viewport" content="width=device-width, initial-scale=1.0">

來源

2015-11-27 07:38:47 khurram

爲了讓一個div響應，你需要使用百分比來表示寬度。使用像素是一個固定的寬度，將持續任何設備。百分比是相對的，並且會增長，或縮小到相對於屏幕大小設置的百分比。也就是說，25％的臺式機顯示器將超過智能手機的25％。

你會遇到的問題是如何減少圖像的大小，因爲圖像的大小是固定的，因爲div現在是一個百分比。

爲了解決這個問題，您可以使用下面的圖像尺寸設置在圖像本身。

img { 
    width: 100%; 
    height: auto; 
}

您還想確保在頭標中沿着這條線使用某些東西。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

來源

2015-11-27 07:51:47 Spnkmyr

感謝所有答覆，

1）我試圖修改.new_banner_homepage {寬度：570px}，並用寬度替換：25％;

它只是將圖像的大小縮小到destokp中的很小，並且在設備模式下非常小。 2）我得到了有效：在我的頭標籤。

我忘了一些信息，也許是因爲我使用買了一個模板...：完整代碼在這裏：

<div class="container"> 

<div class="new_banner_homepage"><a href="#"><img data-retina="true" src="{{media url='wysiwyg/img1.png'}}" alt=""></a> </div> 
<div class="new_banner_homepage"><a href="#"><img data-retina="true" src="{{media url='wysiwyg/img2.png'}}" alt=""></a> </div> 


</div>

和css：

.container{ 

width: 1170px; 
margin-right: auto; 
margin-left: auto; 
} 

.new_banner_homepage{ 
width: 25%; 
float: left; 
min-height: 1px; 
margin-left: 30px; 
margin-bottom: 20px; 
border-radius: 5px; 
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); 
transition: all 0.2s linear 0s; 
transition-property: all; 
transition-duration: 0.2s; 
transition-timing-function: linear; 
transition-delay: 0s; 
} 

@media only screen and (max-width: 25%){ 
    .new_banner_homepage{ width: 25%; }

}

thx

來源

2015-11-27 09:20:12 benny117

構建2 div與圖片responsiv在html和css

回答

相關問題