图片的缩放

1、img

html

<div class='imgBox'>
    <img src="../11-canvas/img/dog.jpg" alt="" style=''>
</div>

<div class='imgBox'>
    <img src="../11-canvas/img/dog.jpg" alt=""> 
</div>

css

.imgBox{
    width: 400px;
    height: 0;
    padding-top: 400px;
    border:1px solid orange;
    overflow: hidden;
}
img{
    width: 120%;
    height:120%;
    position: relative;
    left:-10px;
}
img{
    width: 120%;
    height:120%;
    position: absolute;
    left:-10px;
}
img{
    transform: scale(1.5);
    transform:traslate(10px,10px)
}

缩放

1、width: 120%;height:120%;
2、transform: scale(1.5);

位置

1、position
    relative:相对于自己定位，占据位置
    absolute:相对于父元素定位。不占据位置
2、transform:traslate(10px,10px)右下

2、背景图片

html

<div class='imgBox'></div>

css

.imgBox{
    width: 437px;
    height: 436px;
    border:1px solid orange;
    overflow: hidden;
    background: url('../11-canvas/img/dog.jpg') no-repeat;
    background-size: 120%;
    background-position: -10px 10px;
}