如何水平调整图像大小(通过 CSS)以适合框?

Posted

技术标签:

【中文标题】如何水平调整图像大小(通过 CSS)以适合框?【英文标题】:How to horizontally images resized (via CSS) to fit a box? 【发布时间】:2013-02-08 04:07:32 【问题描述】:

我目前遇到了这个问题。我正在通过 CSS 在一个盒子中调整图片的大小,并强制其高度。

.img_contener 
width: 100%;
height: 400px;

有用于调整图像大小的 CSS:

img   
max-width: 100%;
max-height : auto;
height: auto;
width: auto;
box-sizing: border-box;

现在我想将生成的图片居中,根据它的高度,它不适合包含框,并且默认情况下停留在左侧。

margin:auto 和 text-align:center 都不起作用。

到目前为止,我还没有尝试过 jquery 解决方案...我更喜欢基于 CSS 的解决方案。我的替代方法是使用 php 强制调整图片大小。

【问题讨论】:

是您的.img_contener 上的text-align:center 吗? 您是要调整图片大小以适合您的容器还是要在容器中居中? 【参考方案1】:

这在 CSS 中是完全可行的。请参阅下面的示例,您还应该在容器对象中添加溢出:隐藏。

html

<div id="container">

    <img src="http://userserve-ak.last.fm/serve/252/15767501.jpg" class="inner"/>

</div>

CSS

#container 
    height: 100px;
    width: 100px;
    border: 1px solid black;
    overflow: hidden;



.inner 
    height: 100px;
    width: auto;

工作小提琴 - http://jsfiddle.net/TXvuQ/

【讨论】:

【参考方案2】:

Margin:auto 仅在您也将 display:block 应用于图像时才有效。

【讨论】:

【参考方案3】:

试试这个:

.img_contener  
   //your css ...

   overflow:hidden;



img 

   //your css ...

   display : block;
   margin : 0 auto;

【讨论】:

【参考方案4】:

如果你想让你的图像在主 DIV 中居中,你需要在 img 上使用一个额外的标签

类似的东西

<div id="container">

    <p><img src="http://userserve-ak.last.fm/serve/252/15767501.jpg" class="inner"/></p>

</div>  

还有你的 CSS

#container 
    height: 100px;
    width: 200px;
    border: 1px solid black;
    overflow: hidden;



.inner 
    height: 120px;
    width: auto;


p 
    text-align: center;


工作小提琴:http://jsfiddle.net/TXvuQ/1/

【讨论】:

不需要额外的标签来使div内的图像居中

以上是关于如何水平调整图像大小(通过 CSS)以适合框?的主要内容,如果未能解决你的问题,请参考以下文章

调整大小以适合 div 中的图像,并水平和垂直居中

CSS使图像调整大小并适合任何屏幕

使用 CSS 调整图像大小以适合容器

通过上传 PHP 在多个图像上以相同的比例调整大小

如何调整html中的图像大小以适应屏幕尺寸?

iPhone - 调整图像和两个标签的大小以适合屏幕