使用 css 将图像缩放到宽度和高度以进行缩放

Scale image with css to both width and height to scale

提问by Reactormonk

The bounding box is approx 1000x600, and some images are 500x100, while some others are 400x100 (extreme examples). Now I'd like to scale both up to the maximum size the bounding box is capable to handle, but keep them to scale.

边界框大约为 1000x600，一些图像为 500x100，而另一些为 400x100（极端示例）。现在我想将两者都缩放到边界框能够处理的最大尺寸，但要保持它们的缩放。

img {
  width: 100%;
  height: 100%;
}

Won't keep the image to scale.

不会保持图像缩放。

采纳答案by Lars Nystr?m

You can set only width or only height to 100%. E.g.

您可以仅将宽度或高度设置为 100%。例如

img {
    width: 100%;
}

or

或者

img {
    height: 100%;
}

That will preserve the image scale, but the image might overflow the container.

这将保留图像比例，但图像可能会溢出容器。

This might not work in all browsers, but it does in the latest versions of Firefox, Chrome and Opera. I've had weird experiences with this in the past and my solution was to calculate the new image size on the server.

这可能不适用于所有浏览器，但适用于最新版本的 Firefox、Chrome 和 Opera。过去我在这方面有过奇怪的经历，我的解决方案是计算服务器上的新图像大小。

回答by Doug

I was having difficulty with this until I read this thread (resize view width, preserve image aspect ratio with CSS), and the List Apart article (http://alistapart.com/article/fluid-images) and put it all together.

在我读到这个线程（调整视图宽度，使用 CSS 保留图像纵横比）和 List Apart 文章（http://alistapart.com/article/fluid-images）并将它们放在一起之前，我一直遇到困难。

If your markup is like this...

如果你的标记是这样的......

<img src="myImg.jpg" />

...then simply stating

...然后简单地说

img {
    width:100%
}

should be enough because most modern browsers realise that most people, given a choice, don't want to change the aspect of their images. However, if your markup contains dimension attributes like...

应该足够了，因为大多数现代浏览器都意识到大多数人，如果有选择，不想改变他们图像的方面。但是，如果您的标记包含维度属性，例如...

<img src="myImg.jpg" width="400" height="400" />   

...which, is meant to be better technique, then the markup will shine through the CSS keeping the image at fixed height but flexible width (urgh!) unless you tell it otherwise with something like...

...这意味着更好的技术，然后标记将通过 CSS 保持图像的固定高度但灵活的宽度（呃！）除非你用类似的东西告诉它......

img {
    width:100%;
    height:inherit;
}

...or...

...或者...

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

Both seem to work and force the image back into correct aspect.

两者似乎都有效并迫使图像恢复正确的外观。

I've just stumbled upon this problem myself (my WYSIWIG editor adds dims to images by default - I needed a simple solution or I needed to spend hours hacking JCE to stop this behaviour) and haven't yet tested it exhaustively but it should give you a good starting point if you're having the same issue as me.

我自己刚刚偶然发现了这个问题（我的 WYSIWIG 编辑器默认为图像添加了暗淡 - 我需要一个简单的解决方案，或者我需要花费数小时破解 JCE 来阻止这种行为）并且还没有对其进行详尽的测试，但它应该给出如果你和我有同样的问题，你是一个很好的起点。

回答by ise

Setting only width or height doesn't always work, so alternatively you can set:

仅设置宽度或高度并不总是有效，因此您也可以设置：

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

BUT

但

it will not extend images over their original size

它不会将图像扩展到原始大小

回答by Josh Davenport

I think this A List Apartarticle may help you greatly, it discusses responsive images that adapt to their container, maintaining aspect ratio.

我认为这篇A List Apart文章可能对您有很大帮助，它讨论了适应其容器、保持纵横比的响应式图像。

Essentially you just need to contain the <img>and specify dimensions for that container than apply max-width:100%to the <img>and it will adapt. Read the rest of the article for obligitary IE considerations (thankfully IE7+ supports it).

本质上，您只需要包含<img>并指定该容器的尺寸而不是应用max-width:100%到<img>，它就会适应。阅读本文的其余部分以了解 IE 的强制性注意事项（幸好 IE7+ 支持它）。

回答by logan

I don't know if there is a way to do this with just CSS. If you want to achieve something like thisthen you can use supersized

我不知道是否有办法只用 CSS 来做到这一点。如果你想实现这样的 目标，那么你可以使用supersized

Alternatively, if you don't care about older browsers, you can look into the CSS3 background-sizeproperty. Specifically, I think that setting background-size: coverwill do the trick.

或者，如果您不关心旧浏览器，您可以查看 CSS3background-size属性。具体来说，我认为该设置background-size: cover可以解决问题。

Edit- I misunderstood. What you might actually want is background-size: contain, but the downside is that you probably will have to change your html markup, not just your css.

编辑- 我误解了。您可能真正想要的是background-size: contain，但缺点是您可能不得不更改您的 html 标记，而不仅仅是您的 css。

回答by Hristo

You can't do it like that. You can edit the image element's widthand heightattributes...

你不能那样做。您可以编辑图像元素的width和height属性...

<!-- keeps width-height ratio -->
<img src="smiley.gif" alt="Smiley face" height="50" /> 

<!-- keeps width-height ratio -->
<img src="smiley.gif" alt="Smiley face" width="50" />

<!-- does not keep width-height ratio, unless your image is square -->
<img src="smiley.gif" alt="Smiley face" height="50" width="50" /> 

You can set the widthand heightto either pixels or percent. Note that you don't have to write pxwhen using pixels, but you dohave to write %when doing percentage. So you can do something like...

您可以将width和height设置为像素或百分比。请注意，您不必编写px使用像素时，但你也必须写%做百分比时。所以你可以做一些像......

<img src="smiley.gif" alt="Smiley face" height="100%" width="100%" />

... but that will take 100% of the width and height of the parent element. So be sure you know what the parent element is and its dimensions.

...但这将占用父元素的宽度和高度的 100%。所以一定要知道父元素是什么以及它的尺寸。

回答by Cameron Little

An update to this in 2020. The css property object-fitcan be used to display an image at 100% width and height without distorting it.

2020 年对此的更新。 css 属性object-fit可用于以 100% 的宽度和高度显示图像而不会扭曲它。

.wrapper {
  height: 100px;
  width: 100px;
  border: 1px solid;
}

img {
  width: 100%;
  height: 100%;
}

.contain {
  object-fit: contain;
}

.cover {
  object-fit: cover;
}

<div class="wrapper">
  <img src="https://i.stack.imgur.com/6c39r.jpg" />
</div>
↑ default, bad aspect ratio

<div class="wrapper">
  <img src="https://i.stack.imgur.com/6c39r.jpg" class="contain" />
</div>
↑ <code>object-fit: contain;</code>

<div class="wrapper">
  <img src="https://i.stack.imgur.com/6c39r.jpg" class="cover" />
</div>
↑ <code>object-fit: cover;</code>