Смещение видимого изображения в тегах <img>аналогично фоновому изображению

Question

Используя простые теги , можно ли сместить изображение таким же образом, как вы можете с помощью CSS background-image и background-position?

На странице есть основные изображения, и нет смысла иметь отдельные эскизы, когда оба будут загружены (таким образом, увеличивая пропускную способность). Некоторые изображения являются портретными, а некоторые - альбомными, однако мне нужно отобразить миниатюры в одинаковом размере (и обрезать лишние, если они не соответствуют требуемому соотношению сторон).

Хотя это возможно при использовании других тегов и значений background- CSS, использование простых тегов было бы предпочтительным.

Answer 1

К сожалению, нет, это возможно только с тегом <img>. Есть 2 решения, которые я могу придумать для вашей проблемы:

CSS background-image

Создайте <div>, где изображение применяется в качестве свойства background-image:

<div class="thumbnail" style="background: url(an-image.jpg) no-repeat 50% 50%"></div>

CSS-вырезка

Используйте свойство clip-path, чтобы отображать только часть изображения:

<!-- Clip properties are top, right, bottom, left and define a rectangle by its top-left and bottom-right points -->
<div style="clip-path: inset(10px 200px 200px 10px)">
    <img src="an-image.jpg">
</div>

Подробнее об этом можно прочитать в этой статье .

Answer 2

Если вы поместите изображение в div, вы можете использовать поля для перемещения изображения.Этот конкретный пример использует логотип спрайт-изображения для домашней ссылки, которая меняет положение при наведении курсора.Вы также можете пропустить тег A и переместить изображение с помощью атрибута margin в #logo img.

HTML:

<div id="logo">
    <a href="#">
        <img src="img/src.jpg" />
    </a>
</div>

CSS:

#logo { 
    display: block; 
    float: left; 
    margin: 15px 0; 
    padding: 0;
    width: 350px; //portion of the image you wish to display
    height: 50px; //portion of the image you wish to display
    overflow: hidden; //hide the rest of the image
}
#logo img {
    width: 350px; 
    height: 100px; // you'll see this is 2x the height of the viewed image
    padding: 0; 
    margin: 0;
}
#logo a { 
    display: block; 
    float: left; 
    margin: 0; 
    padding: 0; 
}
#logo a:hover { 
    margin-top: -50px;  //move up to show the over portion of the image
}

Надеюсь, это поможет!

Answer 3

До

<img src="img.png"> Text, Links, Etc

После того, как:

<img src="img.png" style="float:left; margin-bottom:-5px"> Text, Links, Etc

Прочитайте о контексте блочного форматирования в W3C.

Answer 4

Некоторые изображения являются портретными, а некоторые - альбомными, однако мне нужно отобразить миниатюры в одинаковом размере (и обрезать лишнее, если оно не соответствует требуемому соотношению сторон).

Используйте background-size: cover, что должно точно решить эту проблему → с хорошей поддержкой браузера !

и сделать изображение фоновым(возможно, используя background-image в качестве встроенного стиля):

<img style="background-image: url('img/foo.png')"/>