我正在处理图片,我遇到了一个长宽比的问题。
<img src="big_image.jpg" width="900" height="600" alt="" />
如你所见,"高度 "和 "宽度 "已经被指定。我为图像添加了CSS规则。
img {
max-width:500px;
}
但是对于big_image.jpg
,我收到width=500
和height=600
。我怎样才能设置图片的大小,同时保持它们的长宽比。
<!--开始片段。 js hide.false --> -- begin snippet: js hide: false -->
img {
display: block;
max-width:230px;
max-height:95px;
width: auto;
height: auto;
}
<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">
<!--结束片段-->
这将使图像缩小,如果它对指定的区域来说太大了(作为缺点,它不会放大图像)。
下面的解决方案将允许放大和缩小图像,这取决于父框的宽度。
所有图像都有一个固定宽度的父容器仅用于演示目的。 在生产中,这将是父框的宽度。
这个解决方案告诉浏览器以最大可用宽度渲染图像,并以该宽度的百分比调整高度。
<!--开始片段。 js hide: false -->
.parent {
width: 100px;
}
img {
display: block;
width: 100%;
height: auto;
}
<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<div class="parent">
<img width="400" height="400" src="https://placehold.it/400x400">
</div>
<!--结束片段-->
使用更高级的解决方案,你将能够裁剪图像,无论其大小,并添加背景色以补偿裁剪。
<!--开始片段。 js hide.false --> -- begin snippet: js hide: false -->
.parent {
width: 100px;
}
.container {
display: block;
width: 100%;
height: auto;
position: relative;
overflow: hidden;
padding: 34.37% 0 0 0; /* 34.37% = 100 / (w / h) = 100 / (640 / 220) */
}
.container img {
display: block;
max-width: 100%;
max-height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<p>This image is originally 640x220, but should get resized by the CSS:</p>
<div class="parent">
<div class="container">
<img width="640" height="220" src="https://placehold.it/640x220">
</div>
</div>
<!--结束片段-->
对于指定padding的那一行,你需要计算图像的长宽比,例如。
640px (w) = 100%
220px (h) = ?
640/220 = 2.909
100/2.909 = 34.37%
所以,顶部填充物=34.37%。
背景尺寸属性只有ie>=9,但如果你觉得没问题,你可以使用一个带有background-image
的div,并设置background-size: contain
。
div.image{
background-image: url("your/url/here");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
现在你可以将你的Div大小设置为你想要的大小,不仅图像将保持其长宽比,而且还将在Div的垂直和水平方向上集中。只是不要忘记在css上设置尺寸,因为div本身没有宽度/高度属性。
这种方法与setecs的答案不同,使用这种方法,图像区域将是恒定的,并由你来定义(根据div的大小和图像的长宽比,在水平或垂直方向上留下空位),而setecs的答案将为你提供一个与缩放后的图像大小完全相同的盒子(没有空位)。
编辑。 根据MDN background-size documentation,你可以使用一个专有的过滤器声明来模拟IE8中的背景尺寸属性。
虽然Internet Explorer 8不支持background-size属性,但可以使用非标准的-ms-filter函数来模拟它的一些功能。
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";
没有标准的方法来保持图像的长宽比,同时指定 "宽度"、"高度 "和 "最大宽度"。
因此,我们不得不指定 "宽度 "和 "高度 "以防止在加载图像时出现页面 "跳跃",或者使用 "最大宽度 "而不指定图像的尺寸。
只指定 "width"(没有 "height")通常意义不大,但你可以尝试通过在样式表中添加 "IMG {height: auto; }"这样的规则来覆盖 "height "的HTML属性。
也请看相关的Firefox bug 392261。
要在保持响应式图像的同时,仍然强制要求图像具有一定的纵横比,你可以做以下操作。
HTML。
<div class="ratio2-1">
<img src="../image.png" alt="image">
</div>
而SCSS:
.ratio2-1 {
overflow: hidden;
position: relative;
&:before {
content: '';
display: block;
padding-top: 50%; // ratio 2:1
}
img {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
}
这可以用来强制执行一定的纵横比,不管作者上传的图片大小。
感谢 http://codepen.io/Kseso/pen/bfdhg 的 @Kseso。 更多的比例和工作实例请查看这个URL。
如果你想放置宽度固定百分比的图像,但宽度不是固定像素的图像,那么答案是这样的。
而在处理不同尺寸的屏幕时会很有用。
诀窍是
使用 "position.absolute "将图片放在padding空间。 绝对 "把图片放在padding空间。
使用max-height和max-width
来确保图像不会超过父元素。
使用display:block 和 margin: auto
使图片居中。
我也在fiddle里面注释了大部分的技巧。
我也找到一些其他的方法来实现。 在html中不会有真正的图片,所以当我需要"img"的时候,我个人更倾向于顶部的答案。 元素的时候。
通过使用背景简单的css。 http://jsfiddle.net/4660s79h/2/
背景图片,上面有文字。 http://jsfiddle.net/4660s79h/1/
使用绝对位置的概念来自这里 http://www.w3schools.com/howto/howto_css_aspect_ratio.asp
如果要强制要求图片符合一个精确的尺寸,你不需要写太多的代码。 它'如此简单
<!--开始片段。 js hide: false console: true babel.false --> -- begin snippet: js hide: false console: true false -->
img{
width: 200px;
height: auto;
object-fit: contain; /* Fit logo in the image size */
-o-object-fit: contain; /* Fit logo fro opera browser */
object-position: top; /* Set logo position */
-o-object-position: top; /* Logo position for opera browser */
}
<img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png" alt="Logo">
<!--结束片段-->
你可以用这个。
img {
width: 500px;
height: 600px;
object-fit: contain;
position: relative;
top: 50%;
transform: translateY(-50%);
}
你可以创建一个这样的div。
<div class="image" style="background-image:url('/to/your/image')"></div>
然后用这个css来做样式。
height: 100%;
width: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain; // this can also be cover
如果图像在指定的区域内太大,会使图像缩小(缺点是不能放大图像)。
setec的解决方案对于自动模式下的"Shrink to Fit" 自动模式下的解决方案。 但是,要想在'auto'.模式下达到最佳的EXPAND to fit效果,你需要先在'auto' 模式下,你需要先把接收到的图像放到一个临时ID中。 检查它是否可以在高度或宽度上展开(取决于它的纵横比与你的显示块的纵横比)。
$(".temp_image").attr("src","str.jpg" ).load(function() {
// callback to get actual size of received image
// define to expand image in Height
if(($(".temp_image").height() / $(".temp_image").width()) > display_aspect_ratio ) {
$(".image").css('height', max_height_of_box);
$(".image").css('width',' auto');
} else {
// define to expand image in Width
$(".image").css('width' ,max_width_of_box);
$(".image").css('height','auto');
}
//Finally put the image to Completely Fill the display area while maintaining aspect ratio.
$(".image").attr("src","str.jpg");
});
当收到的图像小于显示框时,这种方法很有用。 您必须将它们以原始的小尺寸保存在服务器上,而不是以它们的扩展版本来填充您的大显示框,以节省大小和带宽。
<!--开始片段。 js hide.false --> -- begin snippet: js hide: false -->
img {
max-width: 80px; /* Also works with percentage value like 100% */
height: auto;
}
<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="https://i.stack.imgur.com/aEEkn.png">
<p>Let's say the author of the HTML deliberately wants
the height to be half the value of the width,
this CSS will ignore the HTML author's wishes, which may or may not be what you want:
</p>
<img width="400" height="200" src="https://i.stack.imgur.com/aEEkn.png">
<!--结束片段-->
使用伪元素进行垂直对齐怎么样? 这段较少的代码是针对一个旋转木马的,但我想它适用于每个固定尺寸的容器。 它将保持长宽比,并在顶部/底部或左/写插入@灰暗条,以获得最短的尺寸。 同时,图像通过文本对齐方式水平居中,通过伪元素垂直居中。
> li {
float: left;
overflow: hidden;
background-color: @gray-dark;
text-align: center;
> a img,
> img {
display: inline-block;
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
margin: auto;
text-align: center;
}
// Add pseudo element for vertical alignment of inline (img)
&:before {
content: "";
height: 100%;
display: inline-block;
vertical-align: middle;
}
}