使用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缩放图像

回答

相关问题