我正在制作一款带有Ionic的应用程序,我希望将方形图像作为背景。需要根据不同的分辨率缩放图像;我希望它能够填充设备的宽度,然后在保持宽高比的同时保持高宽度。
我已经尝试添加一个指令来计算要设置的正确高度,但是我无法做任何事情,它似乎根本就没有被调用。
<ion-view view-title="Home" >
<ion-content class >
<div id = "card" ng-model = "card">
<h3>{{card.name}}</h3>
</div>
</ion-content>
</ion-view>
#card{
background-image: url("/img/education.png");
background-size: 100% 100%;
width : 100%;
}
.directive("card", function($scope) {
console.log("Card directive called.");
return {
restrict: "E",
link: function (scope, element) {
console.log("Link Called");
element.height = element.width;
}
}
})
答案 0 :(得分:5)
背景图片不会像<img>
那样定义元素的大小。您有两个选择:
使用<img>
元素代替background-image
。这将导致元素调整为图像的大小(假设图像是方形)。
使用一些棘手的CSS。假设您希望.square
元素的宽度为其宽度的50%
家长。为其指定宽度50%
,高度为0
和
padding-bottom 50%
。
.square {
width:50%;
height:0px;
padding-bottom:50%;
background-size: 100% 100%;
}
这是demo。
答案 1 :(得分:3)
另一个css解决方案是vw
个单位。
100%的视口是100vw,因此将高度设置为100vw会使高度与视口宽度相同,从而产生方形图像。