如何在不拉伸的情况下调整图像大小？

问题描述：

我想要一个<img>，它的宽度是页面的40％，并且会拉长。如何在不拉伸的情况下调整图像大小？

我如何调整它的大小，而不伸展？

举例来说，如果我有一个图像，其文件原本是这样的：

____8888________ 
____8888________ 
____8888________

在我的网页上，通常情况下，它应该是这样的：

____8888________ 
____8888________ 
____8888________

只要我做的浏览器缩小一点，max-width（假设这个例子中有10个字符）会生效。
当发生这种情况，我想它是：

____8888__ 
____8888__ 
____8888__

（就像它已经从右侧切当然双方都好），
而不是：

__888_____ 
__888_____ 
__888_____

任何伎俩（把它变成一个<div>的背景）是好的。
宽度和高度未知。
谢谢大家以前的回答，但是，对不起，我认为我没有把重点放在“之后限制其宽度到页面的40％”，这意味着在宽度限制之前它应该看起来很正常。

也许你可以使用JavaScript来获取容器/浏览器的宽度和高度，然后计算实际的px而不是使用％。 – Tommy 2012-01-13 06:32:31

答

诀窍是把图像转换为包含块元素，例如DIV。一旦将图像的宽度设置为100％，这将指示浏览器将图像宽度与DIV的左右边缘齐平。创建流动布局时

然后控制通过CSS的DIV的宽度，我觉得保持图像中的块级元素，使操作更加容易。

例子：

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>

如果你婉的图像被剪切/裁切以任何方式，将其设置为大于它的父，和母公司的溢出CSS设置为隐藏。

例子：

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>

希望这有助于...

+1好答案。 – Wex 2012-01-13 06:57:30

Errrrrr ...我的意思是，图像最初并没有裁剪（如果我想裁剪，我会手动编辑图像文件），只有当外部容器变得更窄时才会出现“裁剪”效果。 – tslmy 2012-01-13 10:51:44

答

你的意思裁剪图像？如果这样看待CSS溢出属性。你也可以把它放到后台，并居中在div

答

这里有几个选项。（请参阅这里的所有这些选项的演示：http://jsfiddle.net/Squeegy/Gcrdu/）

第一个作为未知大小的普通图像。这显示在任何大小它碰巧是。

<img src="http://www.google.com/logos/classicplus.png">

但事实证明，如果您只设置宽度或仅设置高度，则可以保留图像的高宽比。另一个维度将自行调整以防止拉伸。

// HTML 
<img src="http://www.google.co.jp/logos/classicplus.png" class="aspectshrink"> 

// CSS 
img.aspectshrink { 
    width: 100px; 
}

但是，当您使用CSS背景图像时，您可以根据锚定背景的位置做一些创意修剪。

这是说 “去”

// 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; 
}

这表示 “斗争”：

// 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; 
};

好的感觉，哥们。虽然这不是我的最终答案，但我将非常感谢您的答案，以此来裁剪未来的图像！谢谢。 – tslmy 2012-01-13 10:53:42

答

尝试使用ImageResizer。这里的链接：http://imageresizing.net/

答

添加该类到IMG HTML标记，它会保存图片，因为它是，但将采取必要的特定的空间，ie.40％×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; 
}

如何在不拉伸的情况下调整图像大小？

相关推荐