[Turn]ionic or Angularjs picture display compression problem resolution or display an area of a larger picture, cropping the display

We know that displaying images in HTML is usually tagged with an img control, and of course resizing is easy.

However, a specific IMG size will appear, showing a larger size and a length-to-width ratio that does not match the specific IMG size. and caused the compression problem, the picture squeeze is very serious, looks very uncomfortable.

This time can be used in CSS background-image this property to solve. Use the div tag instead of the IMG tag and set the div's background image.

Because Background-image has a lot of properties to use, it is generally easy to meet the needs, such as Background-size, Background-position, and so on.

In ionic or ANGULARJS, it is easy to customize it as an instruction for convenience, that is, Directive

Examples are as follows:

. directive (' backimg ', function () {    return function (scope, element, attrs) {        attrs. $observe (' backimg ', function (value) {            element.css ({                ' background-image ': ' url (' + value + ') ', '                background-size ': ' Cover ', '                background-position ': ' Center '            }    );})

Then use this:

<div class= "back-img" back-img= "{{info.picture_url}}" style= "height:50px;width:50px;" ></div>

Transferred from: http://blog.csdn.net/wy250864144/article/details/54586010

[Turn]ionic or Angularjs picture display compression problem resolution or display an area of a larger picture, cropping the display