您如何自动调整大图像的大小,以使其适合较小的div容器,同时保持其宽高比?
示例:stackoverflow.com-当图像插入到编辑器面板上并且图像太大而无法容纳在页面上时,图像将自动调整大小。
您如何自动调整大图像的大小,以使其适合较小的div容器,同时保持其宽高比?
示例:stackoverflow.com-当图像插入到编辑器面板上并且图像太大而无法容纳在页面上时,图像将自动调整大小。
Answers:
请勿对图片标签应用明确的宽度或高度。相反,给它:
max-width:100%;
max-height:100%;
另外,height: auto;
如果只想指定宽度。
示例:http://jsfiddle.net/xwrvxser/1/
img {
max-width: 100%;
max-height: 100%;
}
.portrait {
height: 80px;
width: 30px;
}
.landscape {
height: 30px;
width: 80px;
}
.square {
height: 75px;
width: 75px;
}
Portrait Div
<div class="portrait">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
Landscape Div
<div class="landscape">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
Square Div
<div class="square">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
<a>
标签,图像没有调整大小。将规则应用于A标签可解决此问题。
事实证明,还有另一种方法可以做到这一点。
<img style='height: 100%; width: 100%; object-fit: contain'/>
会做的工作。这是CSS 3的东西。
object-fit: cover
当前,对于固定大小的图像(如JPEG或PNG文件),无法以确定性的方式正确执行此操作。
要按比例调整图像大小,你必须设置任何高度或宽度为“100%”,但不能同时使用。如果将两者都设置为“ 100%”,则图像将被拉伸。
选择高度还是宽度取决于图像和容器的尺寸:
height="100%"
在图像上进行设置。width="100%"
在图像上进行设置。如果您的图像是SVG(可变尺寸的矢量图像格式),则可以自动进行扩展以适合容器。
您只需要确保SVG文件在<svg>
标记中未设置以下所有属性:
height
width
viewbox
那里的大多数矢量绘图程序都会在导出SVG文件时设置这些属性,因此,每次导出时,您都必须手动编辑文件,或者编写脚本来执行此操作。
background-size: contain
。
这是一个解决方案,即使所提供的图像太小或太大而无法适合div,也可以在div中垂直和水平对齐img,而不会进行任何拉伸。
HTML内容:
<div id="myDiv">
<img alt="Client Logo" title="Client Logo" src="Imagelocation" />
</div>
CSS内容:
#myDiv
{
height: 104px;
width: 140px;
}
#myDiv img
{
max-width: 100%;
max-height: 100%;
margin: auto;
display: block;
}
jQuery部分:
var logoHeight = $('#myDiv img').height();
if (logoHeight < 104) {
var margintop = (104 - logoHeight) / 2;
$('#myDiv img').css('margin-top', margintop);
}
简单点!
给容器一个固定的 height
,然后在其中的img
标签上设置width
和max-height
。
<div style="height: 250px">
<img src="..." alt=" " style="width: 100%;max-height: 100%" />
</div>
区别在于您将设置width
为100%,而不是max-width
。
一个美丽的hack。
您可以通过两种方式使图像响应。
- 当图像是背景图像时。
#container{
width: 300px;
height: 300px;
background-image: url(http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
<div id="container"><div>
在这里运行
img
标签来把图像,因为它是优于background-image
来讲SEO,你可以写关键字在alt
了的img
标签。因此,这里可以使图像响应。
- 当图像在
img
标签中时。
#container{
max-width: 400px;
overflow: hidden;
}
img{
width: 100%;
object-fit: contain;
}
<div id="container">
<img src="http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" alt="your_keyword"/>
<div>
在这里运行
您可以将图像设置为div的背景,然后使用CSS background-size属性:
background-size: cover;
它将“将背景图像缩放到尽可能大的位置,以使背景区域完全被背景图像覆盖。背景图像的某些部分在背景定位区域内可能看不到” – W3Schools
alt
值和诸如此类的东西(尽管您也可以添加对于非辅助技术不可见的虚拟图像),或者可能需要使其可单击。
background-size: contain
,我想我会亲自走虚拟图像路线,只是因为没有JavaScript确实没有一种简单的方法来执行此处所述的操作
看看我的解决方案:http : //codepen.io/petethepig/pen/dvFsA
它是用纯CSS编写的,没有任何JavaScript代码。它可以处理任何大小和方向的图像。
给定这样的HTML:
<div class="image">
<div class="trick"></div>
<img src="http://placekitten.com/415/200"/>
</div>
CSS代码为:
.image {
font-size: 0;
text-align: center;
width: 200px; /* Container's dimensions */
height: 150px;
}
img {
display: inline-block;
vertical-align: middle;
max-height: 100%;
max-width: 100%;
}
.trick {
display: inline-block;
vertical-align: middle;
height: 150px;
}
我刚刚发布了一个jQuery插件,它通过许多选项完全满足您的需求:
https://github.com/GestiXi/image-scale
用法:
的HTML
<div class="image-container">
<img class="scale" data-scale="best-fit-down" data-align="center" src="img/example.jpg">
</div>
的JavaScript
$(function() {
$("img.scale").imageScale();
});
此解决方案不会拉伸图像并填充整个容器,但是会剪切一些图像。
HTML:
<div><img src="/images/image.png"></div>
CSS:
div {
width: 100%;
height: 10em;
overflow: hidden;
img {
min-width: 100%;
min-height: 100%;
}
我看到很多人都建议对象适合,这是一个不错的选择。但是,如果您希望它也能在较旧的浏览器中运行,则还有另一种方法可以轻松实现。
它很简单。我采取的方法是将图像绝对放置在容器中, 然后使用组合将其放置在中心位置:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
一旦它进入中心,我就给图像,
// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;
// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;
这使图像获得Object-fit:cover的效果。
https://jsfiddle.net/furqan_694/s3xLe1gp/
此逻辑适用于所有浏览器。
我有更好的解决方案,不需要任何JavaScript。它反应灵敏,我经常使用它。您通常需要将具有任何纵横比的图像拟合到具有指定纵横比的容器元素。必须使整个事情全面响应。
/* For this demo only */
.container {
max-width: 300px;
margin: 0 auto;
}
.img-frame {
box-shadow: 3px 3px 6px rgba(0, 0, 0, .15);
background: #ee0;
margin: 20px auto;
}
/* This is for responsive container with specified aspect ratio */
.aspect-ratio {
position: relative;
}
.aspect-ratio-1-1 {
padding-bottom: 100%;
}
.aspect-ratio-4-3 {
padding-bottom: 75%;
}
.aspect-ratio-16-9 {
padding-bottom: 56.25%;
}
/* This is the key part - position and fit the image to the container */
.fit-img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
max-width: 80%;
max-height: 90%
}
.fit-img-bottom {
top: auto;
}
.fit-img-tight {
max-width: 100%;
max-height: 100%
}
<div class="container">
<div class="aspect-ratio aspect-ratio-1-1 img-frame">
<img src="//placehold.it/400x300" class="fit-img" alt="sample">
</div>
<div class="aspect-ratio aspect-ratio-4-3 img-frame">
<img src="//placehold.it/400x300" class="fit-img fit-img-tight" alt="sample">
</div>
<div class="aspect-ratio aspect-ratio-16-9 img-frame">
<img src="//placehold.it/400x400" class="fit-img" alt="sample">
</div>
<div class="aspect-ratio aspect-ratio-16-9 img-frame">
<img src="//placehold.it/300x400" class="fit-img fit-img-bottom" alt="sample">
</div>
</div>
您可以独立设置最大宽度和最大高度。图像将遵循最小的图像(取决于图像的值和纵横比)。您还可以将图像设置为所需的对齐方式(例如,对于无限大的白色背景上的产品图片,可以轻松地将其定位在底部的中央)。
以下代码改编自先前的答案,并由我使用名为的图片进行了测试storm.jpg
。
这是显示图像的简单页面的完整HTML代码。这项工作完美,并由我通过www.resizemybrowser.com进行了测试。将CSS代码放在HTML代码的顶部,在标题下面。将图片代码放在您想要的图片的任何位置。
<html>
<head>
<style type="text/css">
#myDiv
{
height: auto;
width: auto;
}
#myDiv img
{
max-width: 100%;
max-height: 100%;
margin: auto;
display: block;
}
</style>
</head>
<body>
<div id="myDiv">
<img src="images/storm.jpg">
</div>
</body>
</html>
<style type="text/css">
#container{
text-align: center;
width: 100%;
height: 200px; /* Set height */
margin: 0px;
padding: 0px;
background-image: url('../assets/images/img.jpg');
background-size: content; /* Scaling down large image to a div */
background-repeat: no-repeat;
background-position: center;
}
</style>
<div id="container>
<!-- Inside container -->
</div>
编辑:以前的基于表的图像定位在Internet Explorer 11中有问题(max-height
在display:table
元素中不起作用)。我已将其替换为基于行内的定位,这种定位不仅在Internet Explorer 7和Internet Explorer 11中都能正常工作,而且所需的代码更少。
这是我对这个问题的看法。只有在容器具有指定的大小(max-width
并且max-height
似乎与没有具体大小的容器不兼容)的情况下,它才能工作,但是我以允许其重用的方式编写了CSS内容(添加picture-frame
类和px125
现有容器的大小类)。
在CSS中:
.picture-frame
{
vertical-align: top;
display: inline-block;
text-align: center;
}
.picture-frame.px125
{
width: 125px;
height: 125px;
line-height: 125px;
}
.picture-frame img
{
margin-top: -4px; /* Inline images have a slight offset for some reason when positioned using vertical-align */
max-width: 100%;
max-height: 100%;
display: inline-block;
vertical-align: middle;
border: 0; /* Remove border on images enclosed in anchors in Internet Explorer */
}
在HTML中:
<a href="#" class="picture-frame px125">
<img src="http://i.imgur.com/lesa2wS.png"/>
</a>
编辑:使用JavaScript的可能的进一步改进(提升图像):
function fixImage(img)
{
var $this = $(img);
var parent = $this.closest('.picture-frame');
if ($this.width() == parent.width() || $this.height() == parent.height())
return;
if ($this.width() > $this.height())
$this.css('width', parent.width() + 'px');
else
$this.css('height', parent.height() + 'px');
}
$('.picture-frame img:visible').each(function
{
if (this.complete)
fixImage(this);
else
this.onload = function(){ fixImage(this) };
});
line-height
。如果alt文字超过一行,它将开始看起来非常糟糕...
我以这种方式在水平和垂直方向上将超链接内的图像按比例居中和缩放:
#link {
border: 1px solid blue;
display: table-cell;
height: 100px;
vertical-align: middle;
width: 100px;
}
#link img {
border: 1px solid red;
display: block;
margin-left: auto;
margin-right: auto;
max-height: 60px;
max-width: 60px;
}
它已经在Internet Explorer,Firefox和Safari中进行了测试。
有关居中的更多信息,请参见此处。
为了解决这个问题,我添加了一个比例因子。这样,它使图像更大并填充了div容器。
例:
<div style="width:400px; height:200px;">
<img src="pix.jpg" style="max-width:100px; height:50px; transform:scale(4); transform-origin:left top;" />
</div>
笔记:
-webkit-transform:scale(4); -webkit-transform-origin:left top;
样式。下面是一个似乎对我有用的简单解决方案(四步修复!)。该示例使用宽度确定整体大小,但是您也可以将其翻转以使用高度。
%
用于相对大小或自动缩放(基于图像容器或显示)px
(或其他)静态尺寸或设定尺寸例如,
<img style="width:100%; height:auto;"
src="https://googledrive.com/host/0BwDx0R31u6sYY1hPWnZrencxb1k/thanksgiving.png"
/>
所有提供的答案(包括接受的答案)仅在div
包装器具有固定大小的假设下起作用。因此,无论div
包装大小如何,这都是这样做的方法,如果开发响应页面,这将非常有用:
将这些声明写在DIV
选择器中:
width: 8.33% /* Or whatever percentage you want your div to take */
max-height: anyValueYouWant /* (In px or %) */
然后将这些声明放入IMG
选择器中:
width: "100%" /* Obligatory */
max-height: anyValueYouWant /* (In px or %) */
很重要:
值maxHeight
必须是相同的两个DIV
和IMG
选择。
检查我的答案,使图像响应-最简单的方法 -
img{
width: 100%;
max-width: 800px;
}
或者您可以简单地使用:
background-position:center;
background-size:cover;
现在,图像将占据div的所有空间。