就像每个人都知道在css中具有流畅的图像(响应)一样,我们需要使用:
img {
max-width: 100%;
height: auto;
}
当我们的纵横比> 1(更高,更高,例如99%的图像)时,此代码就像一个超级按钮。
现在,我有了这个标记:
<div class="circle-bg">
<img src="pathto/myimage.png" alt="" class="phones">
</div>`
看起来像这样
此图像位于div
内部,其宽度和高度已设置,如下所示:
.circle-bg {
height: 1000px;
width: 800px;
现在,理论上,图像应填充100%的宽度而容器不会溢出,但实际上,我还必须为图像设置宽度和高度,就像这样:
.phones {
width: 100px;
height: 500px;
如您所见,它不是很漂亮,并且响应式图像的css代码段不起作用。
**这里是小提琴:https://jsfiddle.net/xuwcat4r/
答案 0 :(得分:0)
最初,您需要将position : absolute
类的.phones
属性设置为能够根据需要在容器中移动它。
简而言之,您的CSS应该是
CSS
.circle-bg {
width: 740px;
height: 737px;
background: blue;
border-radius: 50%;
}
/* Basic responsive, doesn't work */
img {
max-width: 500px;
height: 600px;
position : absolute;
}
/* positionate images to the center */
.phones {
position: absolute;
left : 142px;
top : 72px;
}
上文提到CSS在这里的作用为https://jsfiddle.net/xu3o9bvd/