使用CSS調整圖像大小

我正在設計一個網頁，其中有幾個網站的鏈接。我使用a href標籤和網站徽標圖像。當我試圖重新調整CSS文件中的圖像大小時，沒有任何工作。使用CSS調整圖像大小

任何想法我做錯了什麼（例如在CSS等使用錯誤的標記）？

HTML代碼：

<div id="main"> 
    <div class="container page"> 
     <h1>Useful Links</h1> 
     <a href="https://pcpartpicker.com/" target="_blank"><img class="links" src="/pictures/external%20links/images%20(1).jpg" alt= "PC Part Picker"></a> 
     <a href="https://www.reddit.com/r/buildapc" target="_blank"><img class="links" src="/pictures/external%20links/reddit.png" alt="Reddit Build a PC"></a> 
     <a href="http://www.tomshardware.com/" target="_blank"><img class="links" src="/pictures/external%20links/tomshardwre.png" alt="Tom's Hardware"></a> 
     <a href="http://www.cnet.com/forums/pc-hardware/" target="_blank"><img class="links" src="/pictures/external%20links/CNET-Logo.png" alt="Cnet"></a> 
     <a href="http://www.pcper.com/" target="_blank"><img class="links" src="/pictures/external%20links/pcper.jpg" alt="PC Perspective"></a> 
    </div>  
</div>

CSS代碼：

.container a img{ 
    width: 200; 
    height: 200; 
    display: block; 
    margin-right: auto; 
    margin-left: auto; 
} 

.container{ 
    width: 960px; 
    height: auto; 
    margin: 0 auto; 
}

來源

2015-11-02 whiskeycoder

我想你忘記了你的css代碼中的px，嘗試添加它並再次檢查 –

您還沒有具體的測量單位爲您的圖像寬度/高度，即px，％等。

如果您更改將值添加到圖像標籤本身，然後200會自動在瀏覽器中翻譯爲200px，但不是在CSS中。

所以這會工作爲200像素由200像素

<a href="https://pcpartpicker.com/" target="_blank"><img class="links" src="/pictures/external%20links/images%20(1).jpg" alt= "PC Part Picker" width="200" height="200"></a>

但是在CSS它必須是：

.container a img{ 
    width: 200px; 
    height: 200px; 
    display: block; 
    margin-right: auto; 
    margin-left: auto; 
}

現在，如果你想讓他們在一排顯示，去掉「顯示：塊「屬性。

而且它們不會全部放在同一行，因此如果這是您要實現的目標，請嘗試將其減少到大約188px（或19％ - 餘量將填充剩餘空間）。

來源

2015-11-02 03:00:25 partypete25

添加px到IMG的措施，在第一。

來源

2015-11-02 02:24:18 userlond

在你的HTML，你可以指定一個自定義的高度和寬度

例如，

<img class="links" src="/pictures/external%20links/images%20(1).jpg" height="200" width="200" alt= "PC Part Picker"></a>

來源

2015-11-02 02:26:38

使用下面的CSS代碼：

.container a img{ 
    width: 200; 
    height: 200; 
    display: block; 
    margin-right: auto; 
    margin-left: auto; 
} 

.container{ 
    width: 960px; 
    height: auto; 
    margin: 0 auto; 
}

來源

2015-11-02 02:32:34

使用CSS調整圖像大小

回答

相關問題