Question

如果我有：

#logo {
    width: 400px;
    height: 200px;
}

然后

<img id="logo" src="logo.jpg"/>

将伸展以填补该空间。我希望图像保持相同的大小，但是它要占用DOM中的那么多空间。我是否必须添加封装<div>或<span>？我讨厌为样式添加标记。

Answer 1

是的，你需要一个封装div：

<div id="logo"><img src="logo.jpg"></div>

有类似的东西：

#logo { height: 100px; width: 200px; overflow: hidden; }

其他解决方案（填充，边距）更繁琐（因为您需要根据图像的尺寸计算正确的值），但也不能有效地允许容器小于图像。

此外，对于不同的布局，上述内容可以更容易地进行调整。例如，如果您想要右下方的图像：

#logo { position: relative; height: 100px; width: 200px; }
#logo img { position: absolute; right: 0; bottom: 0; }

Answer 2

将图像加载为div的背景。

而不是：

<img id='logo' src='picture.jpg'>

DO

<div id='logo' style='background:url(picture.jpg)'></div>

所有浏览器都会裁剪掉不适合的图像部分这有几个优点，包括一个隐藏溢出的元素：

没有额外的加价。 div只是替换了img。
轻松居中或将图像设置为另一个偏移。例如。 url(pic) center top;
足够小时重复图像。（好吧，不知道为什么你会想要那个）
在同一语句中设置bg颜色，轻松将同一图像应用于多个元素，以及适用于bg图像的所有内容。

Answer 3

您可以将object-fit: cover;添加到您的CSS中，它会自动裁剪图像

Answer 4

CSS3对象

我不确定webkit，IE和firefox实现了多远。但是Opera的工作就像魔法一样

object-fit适用于SVG内容，但通过在SVG中设置preserveAspectRatio=""属性也可以实现相同的效果。

img {
  height: 100px;
  width: 100px;
  -o-object-fit: contain;
}

Chris Mills演示了http://dev.opera.com/articles/view/css3-object-fit-object-position/

Answer 5

制作一个div并给它上课。然后放入一个img。

<div class="mydiv">

<img src="location/of/your/image" ></img>

</div>

设置div的大小并使其相对。

    .mydiv {
        position: relative;
        height:300px;
        width: 100%;
        overflow: hidden;
    }

然后设置图像样式

img {
    width: 100%;
    height: auto;
    overflow: hidden;
}

希望有所帮助

Answer 6

#logo {
    width: 400px;
    height: 200px;

    /*Scale down will take the necessary specified space that is 400px x 200px without stretching the image*/
    object-fit:scale-down;
}

Answer 7

我是否必须添加封装＆lt; div＆gt;或＆lt; span＆gt;？

我想你做到了。唯一想到的是填充，但为此你必须事先知道图像的尺寸。

Answer 8

如果使用flexbox是一个有效的选项（不需要支持旧版浏览器），请检查我的其他答案here（这可能是这个答案的副本）：

基本上你需要将你的img标签包装在div中，你的css看起来像这样：

.img__container {
    display: flex;
    padding: 15px 12px;
    box-sizing: border-box;
    width: 400px; height: 200px;

    img {
        margin: auto;
        max-width: 100%;
        max-height: 100%;
    }
}

Answer 9

您可以尝试设置填充而不是高度/宽度。

Answer 10

我能想到的是伸展宽度或高度，让它在比例方面调整大小。两侧会有一些空白区域。像宽屏幕显示分辨率为1024x768的东西。

Answer 11

我所做的只是更改img标签的样式表。但在我的情况下，我知道容器div和高度。容器div也是，高度大于实际图像大小。希望这会有所帮助。

为我工作。

http://guntucomputerhacks.blogspot.com.au/2014/08/force-image-width-and-height-without.html

Answer 12

您可以使用如下：

＆＃13;

.width100 {
  max-width: 100px;
  height: 100px;
  width: auto;
  border: solid red;
}

＆＃13;

<img src="https://www.gravatar.com/avatar/dc48e9b92e4210d7a3131b3ef46eb8b1?s=512&d=identicon&r=PG" class="width100" />

＆＃13;

Answer 13

这是一个很老的问题，但是我遇到了一个完全相同的烦人的问题：Chrome / Edge（具有object-fit属性）一切正常，但是相同的css属性在IE11中不起作用（因为IE11中不受支持），我最终使用了HTML5“图”元素，它解决了我所有的问题。

我个人不使用外部DIV标签，因为这对我而言根本没有帮助，因此我避免使用外部DIV标签，而只是将其替换为'figure'元素。

下面的代码强制图像很好地缩小/缩小（而不更改原始宽高比）。

<figure class="figure-class">
  <img class="image-class" src="{{photoURL}}" />
</figure>

和CSS类：

.image-class {
    border: 6px solid #E8E8E8;
    max-width: 189px;
    max-height: 189px;
}

.figure-class {
    width: 189px;
    height: 189px;
}

如何设置图像的宽度和高度而不拉伸它？

13 个答案: