我正在尝试弄清楚如何重新调整图像的大小,使其保持宽度与高度的比率,但会被重新调整大小,直到图像的高度与包含div的高度匹配。我有这些图像又大又长(屏幕截图),我想将它们放入200px宽度、180px高度的div中进行显示,而无需手动调整图像的大小。为了使其看起来不错,图像的侧面需要溢出并与包含div一起隐藏。这是我到目前为止所拥有的:
http://jsfiddle.net/f9krj/2/
超文本标记语言
html prettyprint-override"><a class="image_container" href="http://www.skintype.ca/assets/background-x_large.jpg">
<img src="http://www.skintype.ca/assets/background-x_large.jpg" alt="" />
</a>
CSS
a.image_container {
background-color: #999;
width: 200px;
height: 180px;
display: inline-block;
overflow: hidden;
}
a.image_container img {
width: 100%;
}
如您所见,图像的父容器上显示了根本不应该显示的灰色。为了使该容器完全填满,宽度需要在两侧平均溢出。这可能吗?是否也可以解释图像也太高?
使用CSS的最大宽度属性,如下所示:
img{
max-width:100%;
}
更改您的代码:
a.image_container img {
width: 100%;
}
为此:
a.image_container img {
width: auto; // to maintain aspect ratio. You can use 100% if you don't care about that
height: 100%;
}
http://jsfiddle.net/f9krj/5/
如果您准备选择CSS3,则可以使用CSS3 translate属性。根据大小调整大小。如果你的高度比容器大,宽度比容器小,宽度将被拉伸到100%,高度将从两侧修剪。同样的情况也适用于较大的宽度。
您的需要,超文本标记语言:
<div class="img-wrap">
<img src="http://lorempixel.com/300/160/nature/" />
</div>
<div class="img-wrap">
<img src="http://lorempixel.com/300/200/nature/" />
</div>
<div class="img-wrap">
<img src="http://lorempixel.com/200/300/nature/" />
</div>
和CSS:
.img-wrap {
width: 200px;
height: 150px;
position: relative;
display: inline-block;
overflow: hidden;
margin: 0;
}
div > img {
display: block;
position: absolute;
top: 50%;
left: 50%;
min-height: 100%;
min-width: 100%;
transform: translate(-50%, -50%);
}
瞧!工作:http://jsfiddle.net/shekhardesigner/aYrhG/
DIV设置为相对
位置。这意味着所有子元素都将从该DIV开始的位置获取起始坐标(起源)。
将图像设置为块元素,min width/height都设置为100%意味着将图像大小调整为其父对象的最小值,无论其大小如何<代码>最小值是关键。如果按最小高度,则图像高度超过父级高度,没有问题。它将寻找最小宽度,并尝试将最小高度设置为父母的100%。两者都是相反的。这确保了div周围没有间隙,但图像总是有点大,并通过溢出:隐藏来修剪
现在,将图像设置为绝对位置,左侧为50%,顶部为50%。意味着将图像从顶部和左侧推50%,确保原点取自DIV。左/顶部单位从父单位测量。
神奇时刻:
变换:平移(-50%,-50%)
现在,CSS3的transform属性的这个translate函数移动/重新定位了一个有问题的元素。该属性处理应用的元素,因此值(x,y)或(-50%,-50%)意味着将图像负片向左移动图像大小的50%,并将图像大小的50%移动到负片顶部。
例如,如果图像大小为200px×150px,
变换:翻译(-50%, -50%)
将计算为翻译(-100px,-75px)。%单位有助于当我们有不同大小的图像。
这只是找出图像和父DIV的形心并匹配它们的棘手方法。
抱歉花了太长时间解释!
阅读更多资源:
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate
问题内容: 我试图弄清楚如何调整图像的大小,以使其保持高宽比,但是要调整大小,直到图像的高度与包含div的高度匹配为止。我有这些非常大和很长的图像(屏幕截图),我想将它们放入200px宽,180px高的div中以进行显示,而无需手动调整图像的大小。为使外观更好看,图像的侧面需要溢出并用包含的div隐藏。这是我到目前为止的内容: HTML CSS 如您所见,图像父容器上显示灰色,根本不显示灰色。为了
我在UIViewController的视图中有一个。我想要的是将它的高度设置为视图的三分之一,无论屏幕大小如何。我当然知道如何从代码中做到这一点。但是,如何仅使用情节提要/界面构建器来实现这一点呢?
问题内容: 我正在尝试给div(位置:固定)的宽度为100%(与其父div有关)。但是我有一些问题 编辑: **第一个问题是通过使用继承解决的,但它仍然无法正常工作。我认为问题在于我正在使用多个采用100%/继承宽度的div。 福克斯的例子 和html 问题似乎是 固定元素始终采用window / document的宽度 。有人知道如何解决吗? 我无法使用我的固定元素进行固定,因为我正在使用jSc
我有一些盒子里面有图像。我想让它做的是,如果图像高度小于其内部的div-boxs高度,则向图像添加一个类。 但是我已经用css将图像设置为div框的100%宽度,所以当我使用jquery时。在图像上,它给出了原始尺寸。有什么建议吗? ID为imgProjekt1和ImgProjekt2的文本从codebehind生成一个普通的img标记。
我想显示 3x3 大小的网格视图。我想根据设备大小设置高度和宽度。我从这个链接中获取参考。 主要活动- 活动_主要- 编辑- 就像首先得到屏幕高度和宽度,然后每个项目的高度和宽度是我得到的屏幕高度和宽度值的1/3。
问题内容: 我只是无法设置导航元素的高度和宽度。 有什么想法我做错了吗? 问题答案: 添加显示:块; a-tag是一个内联元素,因此您的高度和宽度将被忽略。