CSS: отображение изображения с измененным размером и обрезкой

С помощью CSS3 можно изменить background-image размер background-image с помощью background-size, выполнив div обе цели одновременно.

На divs css3.info есть a bunch of examples.

Implemented based on your example, используя donald_duck_4.jpg. В этом divs случае background-size: cover; - это именно то, что webpage вам нужно - он соответствует multiple-backgrounds background-image, чтобы покрыть всю область div содержащего

, и обрезает divs лишнее (в зависимости от pictures соотношения).

.with-bg-size {
  background-image: url('https://i.stack.imgur.com/wPh0S.jpg');
  width: 200px;
  height: 100px;
  background-position: center;
  /* Make the background image cover the area of the 
, and clip the excess */ background-size: cover; }
Donald Duck!

html

css

background-image

image

2022-10-21T19:07:36+00:00
Вопросы с похожей тематикой, как у вопроса:

CSS: отображение изображения с измененным размером и обрезкой