У меня есть изображение размером 320 x 240 пикселей, которое я хочу отображать на веб-странице с удвоенным размером (то есть 640 x 480 пикселей). Раньше я делал это, установив width=640 на тег img.
Тем не менее, я только что заметил в спецификации HTML следующее:
Атрибуты измерения не предназначены для растягивания изображения.
В этом случае, как я могу удвоить размер изображения на веб-странице, не противоречая тому, что намеревается?
Вместо этого вы можете использовать CSS. Два метода, которые приходят на ум, используют преобразование ширины или масштаба.
Например img { width: 640px; } img { width: 640px; }. Это будет поддерживать правильное соотношение сторон без указания высоты.
img {
width: 640px;
}<img src="http://www.placehold.it/320x240">Вы можете установить размер родительского контейнера изображения
.imageContainer {
width: 640px;
height: 480px;
}
img {
width: 100%;
height: 100%
}<div class="imageContainer">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqdnZQDnZOOyBGXXB23WS87IAxZ85drC-ylgrqWCqYk2aEh3Vo">
</div> Через CSS, в идеале, в таблице стилей, но при необходимости в атрибуте style.
Например, здесь ваш 32x32 gravatar растянулся до 128x128:
.stretch-128 {
width: 128px;
height: 128px;
}<img src="https://www.gravatar.com/avatar/6b938dc4205cd0cea4e4e68451c42a21?s=32&d=identicon&r=PG" class="stretch-128">Сначала я создал div с классом с именем divWrapper с определенным размером. Затем мы создаем класс для нашего изображения шириной 100% (который распространяется на divWapper) и добавляет высоту авто (чтобы автоматически сохранить высоту в правильной пропорции). Вы можете настроить размер изображения в соответствии с классом divWapper.
.divWrapper{
width:640px;
height:480px;
float:left;
}
//Now set you image class to
.imageclass{
width:100%
height:auto;
float:left;
}<div class="divWrapper">
<image class="imageclass" src="https://upload.wikimedia.org/wikipedia/commons/2/2d/Picea_glauca_taiga.jpg">
<div>Существует не менее 4 способов сделать это.
width imgпринцип: изменить ширину изображения.
width: 640px; display: block набора width: 640px; display: block width: 640px; display: block для тега img.
img с помощью divпринцип: наследовать ширину от родительского узла.
width: 640px div width: 640pxdisplay: block; width: 100% display: block; width: 100%div принцип: изображение больше не является тегом img, а фоном узла.
background-image: url(), используйте изображение в качестве фонового изображения.background-size: {2x width} {2x height}, чтобы изменить размер изображенияtransform в scale(2), что означает, что я хочу, чтобы размер его в 2 раза превышал его первоначальный размер советы: также нам нужно установить свойство transform-origin в top left, чтобы оно могло начинаться с позиции (относительно) top: 0; left: 0; top: 0; left: 0;
Запустите фрагмент и посмотрите :)
.method-1 {
display: block;
width: 640px;
}
.method-2 {
width: 640px;
}
.method-2 img {
display: block;
width: 100%;
}
.method-3 {
width: 640px;
height: 480px;
background-image: url(http://www.placehold.it/320x240);
background-size: 640px 480px;
}
.method-4 {
transform-origin: top left;
transform: scale(2);
}<h1>method 1: img displays as block, width 640px</h1>
<img src="http://www.placehold.it/320x240" class="method-1" />
<br/>
<h1>method 2: parent dom width 640px, img width 100%.</h1>
<div class="method-2">
<img src="http://www.placehold.it/320x240" />
</div>
<br/>
<h1>method 3: the img as div background, use the background-size attribute to set 2x size.</h1>
<div class="method-3"></div>
<br/>
<h1>method 4: use CSS3 transform property to scale the image into 2x.</h1>
<p>tips: when we set 'transform: scale(2);', we also need to define the 'transform-origin' property to 'top left', in order that the image will align from top to bottom as well as from left to right, or it will lost itself. LOL.</p>
<img src="http://www.placehold.it/320x240" class="method-4" />Вот список вещей, которые вы хотите избежать при загрузке изображения:
Есть способы справиться с каждым из вышеперечисленных.
Для избежания FOUC существует несколько методов:
background-size: cover, поэтому FOUC невозможен, так как документ уже знает размер элемента перед загрузкой изображения. Этот метод также имеет то преимущество, что не отображается сломанные якоря изображения, когда изображение не загружается. Кроме того, этот метод широко используется сегодня в макетах полного экрана, некоторые из которых используют эффект параллакса. Имеет недостаток обрезки сверху/снизу или слева/справа, в зависимости от разницы пропорций между контейнером и изображением.position:absolute контейнер с position:absolute центром и, когда у вас есть его размер (и можно рассчитать точную позицию в потоке документа), оживите его масштаб от 0 до 1, а также анимируя его размер контейнера от "по умолчанию" до нужного размера.Что касается искажения, нечего сказать, за исключением того, что не делайте этого. Любой другой вариант лучше искажения: обрезка, пикселизация, даже FOUC. Искажение в основном гласит: "Не доверяйте мне проектные задания - я не могу сказать, что делает из донтов" - что, по мнению многих, переводится на: "Я не квалифицирован для профессионального развития frontend. идущий на моем пути, скорее всего, не зная ".
О пикселизации. Это сложная задача: вы хотите, чтобы страница загружалась как можно быстрее, но также нужна четкие изображения. При работе с очень большими фоновыми изображениями аккуратный трюк заключается в добавлении шаблона поверх изображения (полосы, точки или любые другие подобные полупрозрачные узоры - художественный штрих, чтобы сделать пикселизацию намного менее заметной).
Еще одна хорошая и умная техника для получения лучшего из обоих миров (скорость и качество изображения):
.65. Lazy загружает полноразмерные изображения, прежде чем они будут прокручиваться. Даже если пиксельная версия видна ненадолго, она будет заменена полноразмерной, создавая эффект фокуса, а также изменяя непрозрачность до 1. Если у вас есть качественные, выдающиеся изображения, вы действительно хотите получить этот эффект (а), потому что он выделяет их, и б), потому что вы хотите загружать изображения в правильном, четком размере). Изображения будут выглядеть "живыми" и получать тонкий фокус, оставляя посетителей с впечатлением от просмотра очень сложного веб-сайта. Избегайте увеличения размера. Здесь src-set входит в игру в сочетании с загрузчиками эскизов, описанными выше. И, конечно же: ленивая загрузка. Всегда ленивая загрузка чего-либо под складкой. Это имеет большое значение.
Короче говоря, это то, как вы правильно загружаете изображения. На самом деле, это огромный вопрос, я даже не коснулся оптимизации, растровых векторов, svg или webp-форматов.
Вы можете достичь этого двумя способами, как показано ниже.
<img class="xx" src="http://placehold.jp/150x150.png">
.xx {
zoom: 200%;
}
.xx {
transform: scale(2);
}
Как правило, я не нашел статью, предоставляющую способ масштабирования изображений с технологиями на стороне клиента (оставьте его механизмом браузера), не теряя при этом какого-либо качества.
С учетом сказанного я боюсь, что если вам нужен лучший способ удвоить свой образ в соответствии со стандартами HTML Standard, лучшим ответом будет использование другого изображения. Увеличенное изображение через фоновый процесс или через Photoshop. Теперь, если вы хотите, чтобы адаптивное изображение соответствовало пользовательскому экрану, так как, скорее всего, это фактический случай, который позволяет достичь стандарта HTML следующим образом:
<picture>
<source srcset="http://www.placehold.it/320x240" media="(min-width: 600px)">
<source srcset="http://www.placehold.it/640x480" media="(min-width: 900px)">
<img src="http://www.placehold.it/160x120">
</picture>
Из моего опыта лучший способ удвоить размер любого изображения для использования на веб-сайтах - фактически удвоить изображение в программе, например Photoshop, а затем загрузить ее. Размер изображения, плотность пикселей для экранов сетчатки и множество различных размеров экрана делают работу с изображениями немного более совершенными, чем раньше, но ничего сложного.
проверьте следующий пример:
<picture>
<source
sizes="(width < 32em) contain, (width >=32em) contain 80vw calc(100vh - 10em)"
srcset="full.jpg 2048h 1024w, half.jpg 1024h, quarter.jpg 512h, eighth.jpg 256h" />
<img src="eighth.jpg" alt="rose flower!" />
</picture>Вы можете использовать javascript для пользователя таким образом, чтобы изменить размер изображения на него double
Проверьте эту демонстрационную версию JsFiddle
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
var img = $("#sky");
// Create dummy image to get real size
$("<img>").attr("src", $(img).attr("src")).load(function(){
var realWidth = this.width;
var realHeight = this.height;
alert("Original width=" + realWidth + ", " + "Original height=" + realHeight);
var newWidth = realWidth * 2;
var newHeight = realHeight * 2;
$("#sky").width(newWidth);
$("#sky").width(newHeight);
alert("new Image Size" + newWidth+"x"+newHeight);
});
});
});
</script>
</head>
<body>
<img src="https://www.cluedin.net/images/providers/stackoverflow.png" id="sky" width="250" alt="Cloudy Sky" contextmenu="skymenu">
<p><button type="button">Get Original Image Size And Double it</button></p>
</body>
</html>
Вы можете делать это по-разному. Но независимо от того, что вы делаете, сначала загрузите свое изображение, размер которого вы хотите, чтобы он имел в виду двойной размер, в противном случае, если вы удвоите размер, тогда он станет неровным или выглядит бледным.
image{ transform: scale(2); }
Попробуйте изменить масштаб, чтобы увеличить размер изображения
Попробуйте установить ширину изображения с помощью CSS
Попробуйте использовать JavaScript с помощью setAttribute ("ширина", "размер")
Мне нравятся большинство предыдущих решений, но проблема здесь в том, что мы фактически не знаем текущий размер изображения, чтобы удвоить его!
Таким образом, мое решение является довольно динамичным, и оно не повлияет на другие изображения на вашем сайте. Кроме того, его можно увеличить, чтобы triple их размеры, и больше, если вы захотите!
Проверьте Live Preview здесь.
Или читайте ниже:
<img class="resize-double" src="https://placeimg.com/100/50/nature">
<img src="https://placeimg.com/200/100/nature">
// Select all images to be resized
const toResizeImgs = document.querySelectorAll(".resize-double");
// Loop over those images and double their size
for(let i=0; i < toResizeImgs.length; i++) {
toResizeImgs[i].style.width = toResizeImgs[i].offsetWidth * 2 + "px";
toResizeImgs[i].style.height = toResizeImgs[i].offsetHeight + "px";
}
Он будет выбирать изображения с помощью класса resize-double, loop на них и изменять их ширину/высоту до 2x текущего!
ПРИМЕЧАНИЕ. И offsetWidth и offsetHeight возвращают текущую ширину/высоту, включая поля, прокладки и границы. Если это вас не устраивает, вы можете использовать clientWidth и clientHeight, или даже scrollWidth и scrollHeight исходя из ваших потребностей!
Самый оптимальный способ - загрузить самое большое изображение на ваш сайт и уменьшить его, где вам нужно с помощью CSS.
1) Лучшее качество для вашего изображения, поскольку масштабирование искажает изображение.
2) Не нужно загружать больше изображений разных размеров
3) Уменьшение масштаба не портит изображение, и это всего лишь несколько строк CSS
Если вы не хотите загружать большее изображение, вторым лучшим и самым быстрым решением является масштабирование его с помощью CSS. Атрибут ширины больше не работает в <img>
Если вы хотите использовать CSS, там действительно хороший способ:
img#image_id {
width: calc(2 * 320px);
height: auto; /* This can be omitted */
}
Это очень полезно, что вы можете изменить масштаб изображения, изменив только одно число (т.е. коэффициент). Не беспокойтесь о высоте изображения, он будет автоматически установлен браузером, даже если вы опустите настройку высоты изображения на авто (поскольку auto является значением по умолчанию ширины и высоты, см. Это и это). Кроме того, вы можете установить высоту вместо установки ширины.
Это было бы полезно для отзывчивого дизайна в некотором роде, и я думаю, что это действительно сложно!
Примечание. Он не работает с флешками, если вы задаете ширину или высоту родителя. В этом случае вы должны явно задать ширину и высоту, иначе для этого будут другие трюки; flex-boxes работает совершенно по-другому.
Ну, вы можете использовать css и избегать растяжения.
img{ width:640px; background-size: cover; height:auto;}
Это равномерно растянет ваше изображение с подходящей высотой. Вы также можете попробовать установить высоту на определенный номер.
Атрибуты измерения не предназначены для растягивания изображения.
Как вы уже упоминали, использование атрибута width не предназначено для растягивания изображения. поэтому в этом случае мы должны использовать transform: scale(2); это хорошая идея, но это может также вызвать конфликт, связанный с совпадением изображения с другим контентом, поэтому лучше всего использовать 2x ширину div с масштабированным изображением 2x с помощью свойства css: transform: scale(2); '
Следовательно: использование стиля ниже должно быть хорошей идеей.
.img2x_container {
width: 640px;
height: 480px;
}
.img2x_container img {
transform: scale(2);
}
Этот прецедент полезен только тогда, когда мы знаем высоту и ширину изображения.
Вы можете использовать преобразование → масштаб
img#imagId {
-ms-transform: scale(2); /* IE 9 */
-webkit-transform: scale(2); /* Safari 3-8 */
transform: scale(2);
}
Я использую следующий код Java Script для масштабирования изображения, которое может наилучшим образом соответствовать контейнеру. Вы можете внести несколько изменений в соответствии с вашими потребностями.
function scaleImage(container, image) {
var c = document.getElementById(container);
var i = document.getElementById(image);
var newSize = scaleSize(c.clientWidth, c.clientHeight, i.width, i.height);
i.style.width = newSize.width;
i.style.height = newSize.height;
c.style.backgroundColor = "transparent";
c.style.border = "none";
var intHeight = ((100-((parseFloat(i.style.height)/87)*100))/2);
var strHeightPercentage = intHeight.toString().concat("%");
c.style.top = strHeightPercentage;}
function scaleSize (maxW, maxH, currW, currH) {var ratio = currH/currW;
if (currW >= maxW && ratio <= 1) {
currW = maxW;
currH = currW * ratio;
}
else if (currH >= maxH) {
currH = maxH;
currW = currH / ratio;
}
return { width: currW, height: currH };
if (currW >= maxW && ratio <= 1) {
currW = maxW;
currH = currW * ratio;
}
else if (currH >= maxH) {
currH = maxH;
currW = currH / ratio;
}
return { width: currW, height: currH };
} }
Самые сложные вещи скрыты в простейшем!
То, что они подразумевают для меня по этому предложению, - "позаботиться о масштабируемости".
И для этого нет ничего лучше, чем svg. Нам нужно думать о кешировании. Просто не вставляйте их напрямую. Пусть клиентский браузер выполняет кэширование с помощью внешнего src.
Как только это будет хорошо сделано, мы можем масштабировать его при размере луны, сохраняя его гладким...
Svg может быть сгенерирован на стороне сервера, но всегда лучше тщательно их создавать (gimp). Затем откройте svg текстовым редактором.
Если вы используете изображения, в настоящее время для хорошего рендеринга в разных разрешениях экрана, лучше всего использовать набор из них в разном разрешении с помощью srcset. Наконец, как и другие элементы динамики, пусть клиентский браузер делает выбор, предоставляя ему множество опций. Опять же, с учетом кэширования. он будет загружать и хранить только тот, который ему нужен.
Если существует html-решение, мы должны использовать его, прежде чем пытаться его изменить (с помощью js или css).
https://css-tricks.com/responsive-images-css/
Новое свойство css находится в городе: рендеринг изображений.
https://drafts.csswg.org/css-images-3/#the-image-rendering
Как обычно, наиболее полным ответом являются спецификации!