如何在瀏覽器調整大小時防止圖像在網格內調整大小

我對前端編碼很陌生，只是在練習網站上工作以幫助習慣代碼。在這個網站中，我在左欄中使用了一個帶有圖像的自舉網格。我想要做的是在瀏覽器大小發生變化時防止圖像大小和位置發生變化，就像本網站在其「我們的着名免費軟件」部分http://presentation.creative-tim.com/中所做的那樣。請注意網格中的圖像保持大小不變，並且在瀏覽器調整大小時在分頁符之前保持在相同的位置。如何在瀏覽器調整大小時防止圖像在網格內調整大小

隨着瀏覽器大小的改變，我的圖片不斷調整大小。我已經試過將所有高度從％改爲px，但沒有運氣。目前我只是在處理大中型瀏覽器窗口。我還沒有嘗試過設計小尺寸或小尺寸的窗戶。以下是我的HTML和CSS。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Welcome to Philadelphia</title> 
 
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" type="text/css" href="/stylesheets/athletics.css"> 
 
</head> 
 

 
<body> 
 
    <div class="full-contain"> 
 
    <div class="row row-one"> 
 
     <div class="col-lg-6 col-md-6 top-col"> 
 
     <img class="img-responsive center-block" src="http://logos- 
 
       download.com/wp- 
 
      content/uploads/2016/04/Philadelphia_Phillies_logo_logotype.png"> 
 
     </div> 
 
     <div class="col-lg-6 col-md-6 top-col">This is a div</div> 
 
    </div> 
 
    <div class="row row-two"> 
 
     <div class="col-lg-6 col-md-6 mid-col">This is a div</div> 
 
     <div class="col-lg-6 col-md-6 mid-col">This is a div</div> 
 
    </div> 
 
    <div class="row row-three"> 
 
     <div class="col-lg-6 col-md-6 btm-col">This is a div</div> 
 
     <div class="col-lg-6 col-md-6 btm-col">This is a div</div> 
 
    </div> 
 
    </div> 
 

 
</body> 
 

 
</html>

.top-col { 
 
    background-color: #003086; 
 
    height: 733px; 
 
    color: white; 
 
} 
 

 
.mid-col { 
 
    background-color: #003B48; 
 
    height: 733px; 
 
    color: white; 
 
} 
 

 
.btm-col { 
 
    background-color: #F4793E; 
 
    height: 733px; 
 
    color: white; 
 
} 
 

 
.row-one { 
 
    height: 733px; 
 
} 
 

 
.row-two { 
 
    height: 733px; 
 
} 
 

 
.row-three { 
 
    height: 733px; 
 
} 
 

 
body { 
 
    height: 733px; 
 
} 
 

 
html { 
 
    height: 733px; 
 
} 
 

 
.full-contain { 
 
    width: 100%; 
 
    height: 733px; 
 
}

藉口外觀粗糙。就像我說的我是初學者。

謝謝！

來源

2017-07-25 Eric

img-responsive Bootstrap類會導致圖像使用父元素調整大小。把這個班帶走，在你的CSS中設計你的img元素，它會做你想做的事。

來源

2017-07-25 02:54:02 smthngfrnthng

真棒的工作。再次感謝！ – Eric

如何在瀏覽器調整大小時防止圖像在網格內調整大小

回答

相關問題