没有裁剪的中心图像的最佳方法是什么？

Question

[！[

.img_div{
      height: 150px;
      width: 150px;
      overflow: hidden;
}
img.prof_img{
      height: 100%;
}

<div class='img_div'> <?php echo "<img class='prof_img' src='$location' alt=''>"; ?> </div>

在没有裁剪的情况下居中图像的最佳方法是什么？] 2] 2

Answer 1

.img_div{
      height: 150px;
      width: 150px;
      overflow: hidden;
}
img.prof_img{
     width: 100%;
}

你甚至可以添加一个

变换：规模（1.1）;你的img.pro_img选择器内部，如果你需要更多的中心..

Answer 2

你可以使用这样的东西。

<div class='img_div' style="background-image: url('<?php echo $location; ?>'); background-position: center;"></div>

请注意使用background-position: center;

Answer 3

img.prof_img{
  height: 100%;
  display:block;
  margin:0 auto;
}

Answer 4

由于图片纵横比与容器不同，因此无法填充容器。

正如我在您的示例中看到的，您希望显示已上传图片的预览，如果您只想显示预览而不是将其修改为好像是用户个人资料图片那么您可以像this那样做，这是一个简单的解决方案，在这种情况下它可以起作用...... 不适用于高大的图像。

这是一个类似的question，可能会有所帮助 试试depa's solution

Answer 5

有几种方法可以做到这一点。从头到尾。

• 在HTML中限制img个比例（但这是not advised）
• 在CSS中设置比例
• 使用background-size background-image属性。

我建议翻阅最后一个，因为前两个广泛使用，除非你正在处理一些僵硬的CMS。

演示here

的小提琴

Answer 6

尝试插入图片

＆＃13;

＆＃13;

.container{
width: 150px;
height: 150px;
float: left;
background: yellow;
border: solid 1px #000;
text-align: center;
}
.container img{
max-width: 100%;
max-height: 100%;
margin: auto;
}

＆＃13;

<div class="container">
<img src="Untitled-2.png" alt="" title="" />
</div>

＆＃13;

＆＃13;

＆＃13;