Использование CSS для масштабирования и изменения положения изображения внутри div? - PullRequest
Новая
       11

Использование CSS для масштабирования и изменения положения изображения внутри div?

0 голосов
/ 02 мая 2010

Мы знаем, как использовать CSS, чтобы показывать только часть изображения в элементе div (то есть спрайтах изображения), но изображение должно быть фоновым изображением.

Мы знаем, как использовать CSS для масштабирования изображения, но изображение должно быть IMG.

Кто-нибудь знает способ масштабирования, изображения и показа только его части?

Например, я хочу:

  1. показывает пиксели (15,15) - (100,100) и
  2. увеличить его на 200%.

Первое, что я могу сделать, создав фоновое изображение. Второе, что я могу сделать, сделав изображение на переднем плане. Но до сих пор я не выяснил, как сделать оба. Возможно ли вообще использовать только CSS / HTML?

1 Ответ

6 голосов
/ 02 мая 2010

Вы можете масштабировать изображение так же, как обычно. Затем используйте контейнер div, чтобы обрезать изображение. Чтобы указать, куда идет прямоугольник обрезки, используйте position: relative на изображении (не содержащий div). Вот пример использования логотипа stackoverflow: 

<style type="text/css">
div {
    /* Set size of crop area. Setting its location happens bellow. */
    width: 150;
    height: 100;
    overflow: hidden;  /* Crop it like it's hot! */

    /* not part of the implementation; only to display what's going on */
    border: 1px solid black;
    background-color: #ddd;
}

img {
    /* Set the crop location by shifting the image
     * up by 70px and to the right by 30px.
     */
    position: relative;
    top: -70px;
    left: 30px;

    /* Scale the image as you normally would. */
    width: 300px;
    height: 150px;
}
</style>

<div>
  <img src="http://sstatic.net/so/img/logo.png">
</div>
...