CSS：圖像不能正確縮放

我是新來的CSS，我試圖縮放2張圖片，它們在相同的類中，以相同的百分比：height：x％and width：y％，但它們不是出來相同的大小。如果重要，我也沒有在HTML文件中設置大小。以下是我的了：CSS：圖像不能正確縮放

.BlogBoxes { 
    font-size: 20px; 
    text-align: justify; 
    border-style: solid; 
    border-width: 3px; 
    width: 70%; 
    height: 30%; 
    margin: 20px 1000px 20px 10px; 
    padding: 10px 10px 50px 30px; 
    background-color: #FFCEB7; 
} 

.BlogBoxes img { 
    float: right; 
    width: 25%; 
    height: 80%; 
    padding-left: 10px; 
    padding-top: 70px; 
}

下面是截圖，如果有幫助

來源

2015-10-05 mr nooby noob

它們已經共享相同的寬度%%。您的瀏覽器嘗試不拉伸圖像，只能將它們縮放到寬度或高度。你最好的選擇是使用已經具有相同尺寸的圖像。 –

@Phil M如果我嘗試設置HTML和CSS中的寬度和高度，會做什麼或者我真的只需要選擇新的圖片？ –

您可以將它們指定爲硬編碼值，如'width：100px'。但請記住，這些圖像最有可能延伸。 –

您需要申請你對圖像的父元素之後的寬度，然後設置圖像最大寬度爲100％。

因此，在您的情況下，您希望圖像佔用'.BlogBoxes'的25％，因此我們將在'.img-container'內創建一個新的div，然後將img放入其中。

.BlogBoxes div.img-container { 
    float: right; 
    width: 25%; 
    /*height: 80%; // forget height this is not necessary */ 
    padding-left: 10px; 
    padding-top: 70px; 
} 
.BlogBoxes div.img-container img { 
    max-width: 100%; 
    height: auto; 
    display: block; 
}

來源

2015-10-05 06:31:01 partypete25

_「忘記身高這是沒有必要的」_ - 看看截圖。問題僅限於身高！ – zeroflagL

是的，但沒有做任何事情。從「.BlogBoxes」類中刪除高度樣式。 – partypete25

「是的，但沒有做任何事情」 - **這是問題！** – zeroflagL

CSS：圖像不能正確縮放

回答

相關問題