Дисплей CSS изображение, измененное и обрезанное

Я хочу показать изображение от URL с определенной шириной и высотой, даже если она имеет другое отношение размера. Таким образом, я хочу изменить размер (поддержание отношения) и затем сократить изображение к размеру, я хочу.

Я могу изменить размер с HTML img свойство и я можем сократить с background-image.
Как я могу сделать обоих?

Пример:

Это изображение:

enter image description here


Имеет размер 800x600 пиксели и я хотим показать как изображение 200x100 пиксели


С img Я могу изменить размер изображения 200x150px:

<img 
    style="width: 200px; height: 150px;" 
    src="http://i.stack.imgur.com/wPh0S.jpg">


Это дает мне это:

<img style="width: 200px; height: 150px;" src="https://i.stack.imgur.com/wPh0S.jpg">


И с background-image Я могу сократить изображение 200x100 пиксели.

<div 
    style="background-image:
           url('https://i.stack.imgur.com/wPh0S.jpg'); 
    width:200px; 
    height:100px; 
    background-position:center;">&nbsp;</div>

Дает мне:

<div style="background-image:url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;">&nbsp;</div>


Как я могу сделать обоих?
Измените размер изображения и затем сократите его размер, который я хочу?

321
задан LWC 28 June 2019 в 03:39
поделиться

5 ответов

Вы могли использовать комбинацию обоих методов, например,

    .crop {
        width: 200px;
        height: 150px;
        overflow: hidden;
    }

    .crop img {
        width: 400px;
        height: 300px;
        margin: -75px 0 0 -100px;
    }
    <div class="crop">
        <img src="https://i.stack.imgur.com/wPh0S.jpg" alt="Donald Duck">
    </div>

можно использовать отрицательный margin для перемещения изображения в <div/>.

462
ответ дан LWC 23 November 2019 в 00:58
поделиться

То, что я сделал, должно создать серверный сценарий, который изменит размер и обрежет изображение на конце сервера, таким образом, он отправит меньше данных через межсеть.

Это довольно тривиально, но если кому-либо интересно, я могу вскопать и отправить код (asp.net)

1
ответ дан Rob 23 November 2019 в 00:58
поделиться

Можно поместить тег img в тег Div и сделать обоих, но я рекомендовал бы против масштабирования изображений в браузере. Это делает паршивое задание большую часть времени, потому что браузеры имеют очень упрощенные алгоритмы масштабирования. Лучше, чтобы сделать Ваше масштабирование в Photoshop или ImageMagick сначала, затем служите ему до клиента, хорошего и симпатичного.

1
ответ дан Dave Markle 23 November 2019 в 00:58
поделиться
.imgContainer {
  overflow: hidden;
  width: 200px;
  height: 100px;
}
.imgContainer img {
  width: 200px;
  height: 120px;
}
<div class="imgContainer">
  <img src="imageSrc" />
</div>

содержание отделения с по существу обрезают изображение путем сокрытия переполнения.

19
ответ дан Igor Ivancha 23 November 2019 в 00:58
поделиться

Можно использовать Kodem , Изображение Изменяет размер Сервиса . Можно изменить размер любого изображения только с вызовом http. Может использоваться небрежно в браузере или использоваться в Вашем производственном приложении.

  • Загрузка изображение где-нибудь Вы предпочитаете (S3, imgur и т.д.)
  • Разъем это в Ваш специализированный URL API (из нашей панели инструментов)
0
ответ дан 23 November 2019 в 00:58
поделиться
Другие вопросы по тегам:

Похожие вопросы: