使用CSS缩放图像

Question

我正在创建一个“最近的博客帖子”模块，您可以在其中查看用户提交的帖子，包括图片。我的问题是我不希望图片的高度超过400像素。我如何缩放图像并使其居中？

<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>

Answer 1

您只需将图片上的max-height元素设置为400px

即可

<强> CSS

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

使用max-height元素可以实现图像大小的灵活性，而margin: 0 auto;可以使图像居中

Answer 2

好像你可以使用：

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

Answer 3

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

Answer 4

非常简单。

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

中心

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