使用CSS縮放圖像

我正在創建一個「最近的博客文章」模塊，您可以在其中查看用戶提交的帖子，包括圖像。我的問題是我不希望圖片的高度超過400像素。我如何縮放圖像並居中？使用CSS縮放圖像

<div class="feed"> 
    <div class="feed-image"> 
    <?php 
    preg_match('/<img.+src=[\'"](?P<src>.+)[\'"].*>/i', $row["content"], $image); 
    echo '<img src="'.$image['src'].'">'; 
    ?> 
    </div> 
</div>

來源

2014-10-08 kanarifugl

好像你可以使用：

img { 
    height: 400px; 
    width: auto; 
    margin: 0 auto; 
}

來源

2014-10-08 15:57:06 will

接近直角的 - 他想要的高度被限制在400，而不是寬度。 – Synchro 2014-10-08 17:03:15

哎呀，我一定有誤讀。 – will 2014-10-08 19:04:04

你可以簡單的設置max-height元素的圖像上400px

CSS

.feed-image img{ 
    max-height:400px; 
    width: auto; 
    margin: 0 auto; 
}

使用max-height元素允許圖像大小的靈活性，而margin: 0 auto;居中圖像

來源

2014-10-08 15:57:13 jleggio

我的問題是圖像佔用了很多垂直空間。所以我必須調整它 - 寬度不是問題。 – kanarifugl 2014-10-08 16:06:06

我認爲他需要它的高度，所以更改爲'最大高度'會做到這一點 – angeldelrio 2014-10-08 16:09:28

哎呀！你是完全正確的。我更新了代碼。這應該現在就做。 – jleggio 2014-10-08 16:55:31

.feed-image { 
    text-align: center; 
} 
.feed-image img { 
    max-width: 400px; 
}

來源

2014-10-08 15:57:47 slashsharp

真的很簡單。

img { 
max-width: 400px; 
height: auto; 
}

而對於中心

.feed-image{ 
text-align: center; 
}

來源

2014-10-08 15:59:02 Maverick

使用CSS縮放圖像

回答

相關問題