Html 如何在不拉伸的情况下调整图像大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8846756/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I resize an image without stretching?
提问by tslmy
I want a <img>whose width is 40% of the page, and it gets stretched.
我想要一个<img>宽度为页面 40% 的，并且它会被拉伸。
How can I resize it without stretching?
如何在不拉伸的情况下调整它的大小？
For example, if I have a image whose file originally looks like this:
例如，如果我有一个图像，其文件最初如下所示：
____8888________
____8888________
____8888________
In my webpage, normally, it should looks like:
在我的网页中，通常应该是这样的：
____8888________
____8888________
____8888________
As soon as I make the browser a little more narrow, the max-width(let's say 10 characters in this example) would take effect.
When that happens, I would like it to be:
只要我让浏览器更窄一点，max-width（在本例中假设为 10 个字符）就会生效。
当这种情况发生时，我希望它是：
____8888__
____8888__
____8888__
(just like it's been cut from the right side. Of course from both sides are better),
Rather than:
（就像是从右边剪下来的一样。当然从两边剪得更好），
而不是：
__888_____
__888_____
__888_____
- Any trick (putting it into a
<div>'s background) is okay. - Width and height are unknown.
- Thank you all for your previous answers, but, sorry, I think I haven't put enough emphasis on "Afterlimiting its width to 40% of the page", which means before width-limiting it should looks normal.
- 任何技巧（将其放入 a
<div>的背景中）都可以。 - 宽度和高度未知。
- 谢谢大家对你以前的答案，但是，对不起，我想我还没有被足够重视的“后之前，这是限制其宽度与页面的40％”宽度限制它应该看起来正常。
回答by sixtillnine
The trick is to put the image into a containing block element, eg a DIV. Once inside set the width of the image to 100%, this will instruct the browser to fit the image width flush with the left and right edges of the DIV.
诀窍是将图像放入包含块元素，例如 DIV。一旦进入内部，将图像的宽度设置为 100%，这将指示浏览器使图像宽度与 DIV 的左右边缘齐平。
You then control the width of the DIV via CSS, I find keeping the image in a block element makes manipulation much easier when creating fluid layouts.
然后您可以通过 CSS 控制 DIV 的宽度，我发现将图像保留在块元素中可以在创建流体布局时更容易操作。
Example:
例子：
img.stretchy {
width: 100%; /*Tells image to fit to width of parent container*/
}
.container {
width: 33%; /*Use this to control width of the parent container, hence the image*/
}<div class="container">
<img src="http://i.stack.imgur.com/fv6Ib.jpg" alt="Beach Scene" class="stretchy" />
</div>If you wan the image to be clipped/cropped in any way, set it to be larger than it's parent, and set the parent's overflow css to hidden.
如果您希望以任何方式剪切/裁剪图像，请将其设置为大于其父级，并将父级的溢出 css 设置为隐藏。
Example:
例子：
img.clipped {
width: 150%; /*Scales image to 150% width of parent container*/
float: left; /*Floats image to left of container - clipping right hand side*/
float: right; /*Floats image to right of container - clipping left hand side*/
}
.container {
width: 33%; /*Use this to control width of the parent container, hence the image*/
overflow: hidden;
}<div class="container">
<img src="http://i.stack.imgur.com/fv6Ib.jpg" alt="Beach Scene" class="clipped" />
</div>Hope this helps...
希望这可以帮助...
回答by Manoj Selvin
Add this class to the img html tag, it will keep the image as it is, but will take the necessary specified space ie.40% x 40% without stretching the image
将此类添加到 img html 标签中，它将保持图像原样，但会占用必要的指定空间 ie.40% x 40% 而不拉伸图像
.img{
width:40%;
height:40%; //change to whatever your choice
/*Scale down will take the necessary specified space that is 40% x 40% without stretching the image*/
object-fit:scale-down;
}
回答by Alex Wayne
Here's a few options. (see the demo of all these options here: http://jsfiddle.net/Squeegy/Gcrdu/)
这里有几个选项。（在此处查看所有这些选项的演示：http: //jsfiddle.net/Squeegy/Gcrdu/）
The first as a plain image of unknown size. This displays at whatever size it happens to be.
第一个是大小未知的普通图像。它以任何大小显示。
<img src="http://www.google.com/logos/classicplus.png">
But as it turns out, you can preserve the aspect ratio of an image if you only set the width, or only the height. The other dimension will adjust itself to keep things from stretching.
但事实证明，如果只设置宽度或高度，则可以保留图像的纵横比。另一个维度会自我调整以防止事物伸展。
// HTML
<img src="http://www.google.co.jp/logos/classicplus.png" class="aspectshrink">
// CSS
img.aspectshrink {
width: 100px;
}
But when you use CSS background images you can do some creative cropping based on where anchor the background.
但是当您使用 CSS 背景图像时，您可以根据背景锚点的位置进行一些创造性的裁剪。
This says "Go"
这说“走”
// HTML
<div class="cropped-right"></div>
// CSS
.cropped-right {
width: 100px;
height: 100px;
background: url(http://www.google.com/logos/classicplus.png);
background-position: left center;
background-repeat: no-repeat;
border: 1px solid red;
}
And this says "gle":
这说“gle”：
// HTML
<div class="cropped-left"></div>
// CSS
.cropped-left {
width: 100px;
height: 100px;
background: url(http://www.google.com/logos/classicplus.png);
background-position: right center;
background-repeat: no-repeat;
border: 1px solid red;
};
回答by JudasPriest
Try to use ImageResizer. Here's the link : http://imageresizing.net/
尝试使用 ImageResizer。这是链接：http: //imageresizing.net/
回答by Ed Heal
Do you mean cropping the image? If so look into CSS overflow property. Also you could put it into the background and centre it in the div
你的意思是裁剪图像？如果是这样，请查看 CSS 溢出属性。你也可以把它放在背景中并将其居中div
