将图像居中到 div 的中心

问题描述

假设我有一个 div 和一个像这样的图像

<img src="image.jpg"/>

现在让我们说 css 是这样的:

#image_wrapper{宽度:100px；高度:120px；溢出:隐藏；}图片{最大宽度:100px；最大高度:120px；}

现在我的图像可以是任何大小，最大宽度或高度角色几乎可以完美地调整它的大小，但我需要图像来完全填充 image_wrapper，现在我知道这听起来不可能，但我看到了什么facebok 对他们的图片做了处理，他们只是剪掉了边缘，这样所有的图片看起来都是完美的尺寸，那么他们是怎么做的呢?

编辑 Javascript 或 php 帮助完全没问题，只要它能完成工作.

解决方案

如果您不想走 js 之路，那么使用 php 有一个非常简单的方法.我建议您安装 phpThumb.它负责调整缩略图(和其他东西)的图像大小和过滤图像，这似乎是您在这里尝试实现的目标.您可以将各种参数传递给脚本(请参阅:Demo Page).它有一个叫做 zoom-crop (zc)，它放大图像，使其适合您指定的大小，并在中心内裁剪它.这完全符合你的描述.因此，当您希望将图像放入 div 时，只需使用此 URL.

http://URLTOPHPTHUMB.PHP?src=SOURCEOFYOURIMAGE&w=120&h=100&zc=1

So let's say i have one div and one image like this

<div id="image_wrapper">
    <img src="image.jpg" />
</div>

Now let's say css is like this:

#image_wrapper{
    width:100px;
    height:120px;
    overflow:hidden;
}
img{
    max-width:100px;
    max-height:120px;
}

Now my image could be any kind of size, and max width or height roles would resize it almost perfectly but i need image to fill image_wrapper completely, now i know it sounds imposible but i saw what facebok did with their image, they simply cuts out the edges and this way makes all image look perfect sized, so how do they do it?

EDIT Javascript or php help is totaly fine as long as it does the job.

解决方案

If you don't want to go down the js road there's a perfectly simple way to do it with php. I recommend you install phpThumb. It takes care of resizing and filtering images for thumbnails (and other things), which seems like what you are trying to achieve here. You can pass all manner of parameters to the script (see: Demo Page). It has one called zoom-crop (zc), which zooms the image up so it fits inside the size that you've specified, and crops it, inside the centre too. This fits your description perfectly. So just use this URL for when you want the image inside your div.

http://URLTOPHPTHUMB.PHP?src=SOURCEOFYOURIMAGE&w=120&h=100&zc=1

这篇关于将图像居中到 div 的中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！