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

Использование plain <img> метки можно смещать изображение так же, как вы можете, с помощью фонового изображения и фонового положения CSS?

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

Хотя это возможно, используя другие теги и фоновые значения CSS, использование plain <img> теги будут предпочтительнее.

Ответ 1

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

background-image CSS

Создайте <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>

Вы можете прочитать об этом в этой статье.

Ответ 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
}

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

Ответ 3

До

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

После:

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

Ознакомьтесь с контекстом форматирования блоков на W3C.

Ответ 4

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

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

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

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