CSS2
Если вам нужно увеличить изображение, вы должны отредактировать само изображение в редакторе изображений.
Если вы используете тег img, вы можете изменить размер, но это не даст желаемого результата, если вам нужно, чтобы изображение было фоном для какого-то другого контента (и оно не будет повторяться, как вы, кажется, хотите) ...
CSS3 раскрыть полномочия
Это можно сделать в CSS3 с помощью background-size.
Все современные браузеры поддерживают это, поэтому, если вам не требуется поддержка старых браузеров, это способ сделать это.
Поддерживаемые браузеры:
Mozilla Firefox 4.0+ (Gecko 2.0+), Microsoft Internet Explorer 9.0+, Opera 10.0+, Safari 4.1+ (webkit 532) и Chrome 3.0+.
.stretch{
/* Will stretch to specified width/height */
background-size: 200px 150px;
}
.stretch-content{
/* Will stretch to width/height of element */
background-size: 100% 100%;
}
.resize-width{
/* width: 150px, height: auto to retain aspect ratio */
background-size: 150px Auto;
}
.resize-height{
/* height: 150px, width: auto to retain aspect ratio */
background-size: Auto 150px;
}
.resize-fill-and-clip{
/* Resize to fill and retain aspect ratio.
Will cause clipping if aspect ratio of box is different from image. */
background-size: cover;
}
.resize-best-fit{
/* Resize to best fit and retain aspect ratio.
Will cause gap if aspect ratio of box is different from image. */
background-size: contain;
}
В частности, мне нравятся значения cover и contain, которые дают нам новую силу контроля, которой у нас не было раньше.
Круглый
Вы также можете использовать background-size: round, которые имеют значение в сочетании с повтором:
.resize-best-fit-in-repeat{
/* Resize to best fit in a whole number of times in x-direction */
background-size: round auto; /* Height: auto is to keep aspect ratio */
background-repeat: repeat;
}
Это позволит отрегулировать ширину изображения, чтобы оно соответствовало целому числу раз в области расположения фона.
Дополнительные примечания
Если вам нужен статический размер пикселя, все равно разумно физически изменить размер фактического изображения. Это необходимо как для повышения качества изменения размера (учитывая, что программное обеспечение для обработки изображений работает лучше, чем для браузеров), так и для экономии полосы пропускания, если исходное изображение больше, чем то, что отображается.