Как мне удвоить размер изображения на веб-странице?
У меня есть изображение размером, скажем, 320 x 240 пикселей, которое я хочу отображать на веб-странице в двойном размере (т.е. 640 x 480 пикселей). Раньше я делал это, устанавливая width=640 на теге img.
Однако я только что заметил следующий в спецификации HTML:
The dimension attributes are not intended to be used to stretch the image.
В таком случае, как мне удвоить размер изображения на веб-странице, не нарушая требований спецификации?
@JoeWarner: Нет, атрибуты нужны для того, чтобы сообщить механизму верстки, насколько велико изображение до загрузки, чтобы страница не перемещалась по мере появления изображений. Растяжка - это побочный продукт лжи об этом / неправильного понимания. :-)
Удвойте это на стороне сервера. И спросить мой сервер / ресурсы / мой ресурс? W = x & h = y. Кешируйте его как-нибудь или спрячьте за CDN. В противном случае у вас будут проблемы с рендерингом, растяжением / изменением размера и т. д.
Может помочь следующее. W3 предлагает использовать flex, flexbox .. lists.w3.org/Archives/Public/www-style/2012Apr/0719.html и codepen.io/dudleystorey/pen/Kgofa
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 19
Через CSS, в идеале в таблице стилей, но при необходимости в атрибуте style.
Например, вот ваш граватар 32x32, растянутый до 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) и добавляем высоту auto (чтобы автоматически поддерживать правильную пропорцию высоты). Вы можете настроить размер изображения в соответствии с классом 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>Это сохранит пропорции изображения независимо от размера контейнера-обертки.
Полезное примечание:
У вас должно быть высококачественное изображение с самого начала. Я предлагаю использовать векторные изображения. Я предпочитаю использовать PNG или SVG. У него качество лучше, чем у jpeg и других. Вот пара ссылок, которые немного описывают расширения изображений.
https://blog.online-convert.com/best-image-file-extensions/
https://www.sitepoint.com/gif-png-jpg-which-one-to-use/
на самом деле установка его на 100% высоту приведет к растяжению и ухудшению изображения. Если вы должны работать с высотой, установите высоту на размер и ширину на авто. и OP не прокомментировал поплавок.
Определенно, вы правы. Хотя, речь идет о double the size of an image. Чтобы достичь этого, потребуются проблемы с растяжкой, но мы не знаем, что ему нужно делать. Я не знаю, есть ли что-то среднее. Если вы знаете решение; Пожалуйста, поделитесь этим с нами!
@Elharony Это решение масштабируется до нужных размеров и сохраняет то же соотношение, что и исходное. Если вы удвоите ширину контейнера изображения, изображение удвоится ... Почему у нас все равно появляется этот диалог, это их проблема с моим решением?
О нет, здесь нет никаких проблем. Меня беспокоит фиксированное значение для родителя: width:640px; height:480px;. Я имею в виду, что мы не знаем размера входящего изображения. Бывший; Если исходное изображение было 400x200. Чтобы удвоить его, мы хотели установить для родительского div значение 800x400. Не 640х480. Это то, о чем я думал, когда пытался предоставить решение javascript - dynamic. Но я полагаю, что все зависит от того, кто задал этот вопрос. В любом случае, мне понравилось ваше решение, и в нем нет ничего плохого, я просто делюсь с вами своими мыслями!
Это пример того, как OP будет знать размер при создании своей страницы. На самом деле не имеет значения размер изображения, просто то, что вы с ним делаете. Он должен поместить изображение куда-нибудь, в какой-то контейнер. Мне нравится ваше js-решение, но даже оно должно быть помещено в какой-то контейнер или тег.
Да, я согласен с тобой. Спасибо за такое обсуждение, это помогло мне писать по существу ответы здесь, на SOF, я немного новичок, и это мне очень помогло !!
Вы можете установить размер родительского контейнера изображения
.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>Этот подход (с использованием контейнера) лучше, чем просто установка width: 640px; height: 480px; непосредственно на img?
это заставляет изображение растягиваться на 100% по ширине и 100% по высоте. Если ваше изображение имеет размер 200 пикселей X 500 пикселей и вы установили его в контейнер 640 пикселей X 480 пикселей, ваше изображение будет сжато, и если вы сделаете это для большего контейнера, высота которого, скажем, 1000 пикселей, изображение растянется.
Вместо этого вы можете использовать CSS. Два метода, которые приходят в голову, используют преобразование ширины или шкала.
Например. img { width: 640px; }. Это сохранит правильное соотношение сторон без указания высоты.
img {
width: 640px;
}<img src = "http://www.placehold.it/320x240">Например. img { transform: scale(2) }
img {
transform-origin: top left;
transform: scale(2);
}<img src = "http://www.placehold.it/320x240">По моему опыту, лучший способ удвоить размер любого изображения для использования на веб-сайтах - это фактически удвоить изображение в такой программе, как 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>Вы загружаете относительно большое изображение, по крайней мере, FHD или больше, а затем настраиваете его с помощью «sizes» и «srcset», которое загружать в зависимости от размера / типа экрана. Таким образом, вы покрываете любое потенциальное разрешение, маленькое или большое, и всегда показываете лучшую версию вашего изображения. Хорошо, я признаю это, перед загрузкой каждого изображения нужно выполнить некоторую ручную работу, но конечный результат того стоит!
Теперь, если вы настаиваете на сохранении одного и того же небольшого файла изображения и удваиваете его с помощью кодирования, тогда лучший способ - добавить класс CSS к вашему изображению, и в этом классе указать ваши удвоенные размеры, и все.
Вот забавное и хорошее объяснение о srcset, размерах изображений и важности того, почему нам нужно делать это таким образом. Веселая статья о srcset
Вы можете использовать javascript таким образом, чтобы изменить размер изображения на двойной
Проверьте эту демонстрацию 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>
Самое сложное скрыто в самом простом!
Под этим предложением они подразумевают мне, чтобы «позаботиться о масштабируемости».
И для этого нет ничего лучше 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
Как обычно, наиболее полный ответ - это спецификации!
Для этого есть как минимум 4 способа.
1. непосредственно установить атрибут width для img
принцип: изменить ширину изображения.
установите width: 640px; display: block для тега img.
2. оберните img в div
принцип: наследовать ширину от родительского узла.
- div
width: 640px - img
display: block; width: 100%
3. Установите изображение в качестве фона для div.
принцип: изображение больше не тег img, а фон узла.
- div
background-image: url(), используйте изображение в качестве фонового изображения. - div
background-size: {2x width} {2x height}, чтобы изменить размер изображения
4. Масштабировать изображение в 2 раза
- установите для свойства
transformзначениеscale(2), что означает, что я хочу, чтобы его размер был в 2 раза больше его исходного размера.
советы: также нам нужно установить свойство transform-origin в top left, чтобы оно могло начинаться с позиции (относительно) 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's 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 - что происходит, когда в браузере нет размера изображения перед его загрузкой (в этом случае он не выделяет для него места до его полной загрузки) или сообщает браузеру неправильный размер.
- искажение (отображение изображения с соотношением сторон, отличным от 1: 1)
- пикселизация (отображение изображения в значительно большем размере, чем его собственный размер)
- загрузка изображений со значительно большим собственным размером, чем размер на странице - они замедляют страницу и потребляют ненужную полосу пропускания
Есть способы справиться с каждым из вышеперечисленных.
Чтобы избежать FOUC, есть несколько методов:
- сохранить размеры (или соотношение) изображений, помимо самого файла, чтобы вы могли выделить правильное пространство в потоке страниц перед загрузкой изображений (например, WP делает это из коробки, и большинство тем используют это, чтобы избежать FOUC)
- иметь изображение, загруженное в контейнер, как фоновое изображение с
background-size: cover, поэтому FOUC невозможно, поскольку документ уже знает размер элемента до загрузки изображения. Этот метод также имеет преимущество в том, что не отображаются неработающие привязки изображения, когда изображение не загружается. Кроме того, сегодня этот метод широко используется в макетах полноэкранных изображений, некоторые из которых используют эффект параллакса. Имеет недостаток обрезки сверху / снизу или слева / справа, в зависимости от разницы в соотношении сторон между контейнером и изображением. - загрузите изображение в контейнер с центрированием
position:absoluteи, когда у вас есть его размер (и вы можете рассчитать точное положение в потоке документов), анимируйте его масштаб от 0 до 1, а также анимируйте размер контейнера от «по умолчанию» до нужного размера.
По поводу искажение особо нечего сказать, кроме как не делайте этого. Любой другой вариант лучше искажения: кадрирование, пикселизация, даже FOUC. Искажение в основном говорит: «Не доверяйте мне дизайнерские задания - я не могу отличить, что нужно, от того, что нельзя», что для многих переводится как «Я не имею права на профессиональную разработку интерфейса. Я испорчу любой веб-сайт на моем пути, скорее всего, не зная».
На пикселизация. Это непростой вопрос: вы хотите, чтобы страница загружалась как можно быстрее, но при этом вам нужны четкие изображения. При работе с очень большими фоновыми изображениями хитрый трюк состоит в том, чтобы добавить узор поверх изображения (полосы, точки или любые другие подобные полупрозрачные узоры - художественный штрих, чтобы сделать пикселизацию намного менее заметной).
Еще один хороший и умный способ получить лучшее из обоих миров (скорость и качество изображения) - это:
- загрузить пропорциональные версии миниатюр для каждого изображения ниже сгиба (да, они будут выглядеть пиксельными) и отобразить их с непрозрачностью
.65. Ленивая загрузка полноразмерных изображений до того, как они появятся в поле зрения. Даже если пиксельная версия видна на короткое время, она будет заменена полноразмерной, создавая эффект фокусировки вместе с изменением непрозрачности на1. Если у вас есть качественные, выдающиеся изображения, вам действительно нужен этот эффект (а) потому, что он выделяет их, и б) потому, что вы хотите загружать изображения правильного, четкого размера). Изображения будут выглядеть «живыми» и получат тонкий фокус, оставляя у посетителей впечатление, что они смотрят на очень сложный веб-сайт.
Избегайте превышение размеров. Здесь в игру вступает src-set в сочетании с описанными выше загрузчиками миниатюр. И, конечно же, ленивая загрузка. Всегда лениво загружайте что-нибудь ниже сгиба. Это большая разница.
Короче говоря, вот как правильно загружать изображения. На самом деле, это огромная тема, я даже не касался оптимизации, растров и векторов, форматов svg или webp.
Вы можете сделать это разными способами. Но что бы вы ни делали, сначала загрузите свое изображение, размер которого вы хотите, чтобы он означал двойной размер, иначе, если вы удвоите размер, оно станет пиксельным или будет блеклым.
image{ transform: scale(2); }
Попробуйте изменить масштаб, чтобы увеличить изображение вдвое
Попробуйте установить ширину изображения с помощью CSS
Попробуйте использовать JavaScript с setAttribute ("ширина", "размер")
Мне нравится большинство предыдущих решений, но проблема здесь в том, что мы на самом деле не знаем текущий размер изображения, чтобы удвоить его !!
Итак, мое решение довольно динамично, и оно не повлияет и на другие изображения на вашем сайте.
Кроме того, его можно расширить до triple своих размеров и даже больше, если хотите!
Check a Live Preview here.
Или прочтите это ниже:
HTML
<img class = "resize-double" src = "https://placeimg.com/100/50/nature">
<img src = "https://placeimg.com/200/100/nature">
JavaScript
// 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, зациклится на них и изменит их ширину / высоту на 2x от текущего!
ПРИМЕЧАНИЕ: Оба offsetWidth и offsetHeight возвращают текущую ширину / высоту, включая поля, отступы и границы. Если вам это не подходит, вы можете использовать clientWidth и clientHeight или даже scrollWidth и scrollHeight в зависимости от ваших потребностей!
Хммм, я заметил отрицательный голос. Может ли тот, кто проголосовал против меня, помочь, объяснив почему. Это поможет мне улучшить мои ответы в следующий раз! Спасибо :)
Это был не я, но, вероятно, потому, что вы используете JS, где решения только для CSS было бы достаточно.
Спасибо за комментарий @mrcharlie! Но проблема с решениями CSS в том, что мы на самом деле не знаем исходный размер изображения. Вот почему я подумал, что JS Solution будет лучше, поскольку оно удвоит свой исходный размер, каким бы оно ни было.
Вам не нужно знать исходный размер изображения, вам нужно только увеличить размер изображения. Можно использовать что-то вроде transform: scale(2).
@mrcharlie, хотя это можно сделать с помощью CSS, OP имеет теги Javascript, поэтому ответ JS в порядке. Одна из причин, по которой мне нравится StackOverflow, всегда есть несколько способов сделать что-то, и каждый из них может быть правильным, это кодирование :)
@ Джонни, я не тот, кто проголосовал против, я просто выдвигаю гипотезу ¯ \ _ (ツ) _ / ¯
@mrcharlie Нет, я не говорил, что просто читал комментарии '
Самый оптимальный способ - загрузить самое большое изображение на свой сайт и уменьшать масштаб его там, где вам нужно, через CSS.
1) Лучшее качество изображения, так как масштабирование искажает изображение.
2) Не нужно загружать больше изображений с разными размерами.
3) Даунскейлинг не портит изображение, это всего лишь несколько строк CSS
Если вы не хотите загружать изображение большего размера, второе лучшее и самое быстрое решение - масштабировать его с помощью CSS. Атрибут ширины больше не работает в <img>
Уловка CSS: установка только одного свойства
Если вы хотите использовать CSS, есть действительно хороший способ:
img#image_id {
width: calc(2 * 320px);
height: auto; /* This can be omitted */
}
Это очень полезно, поскольку вы можете изменить масштаб изображения, изменив всего одно число (то есть коэффициент). Не беспокойтесь о высоте изображения, она будет установлена автоматически браузером, даже если вы опустите установку высоты изображения на auto (потому что auto - это значение по умолчанию для ширины и высоты; см. это и это). Кроме того, вы можете установить высоту вместо ширины.
В некотором смысле это было бы полезно для адаптивного дизайна, и я думаю, что это действительно сложно!
Примечание: не работает с гибкими боксами, если вы устанавливаете родительскую ширину или высоту. В этом случае вы должны явно указать ширину и высоту, иначе для этого есть другие уловки; flex-box работает совершенно иначе.
Ну, вы можете использовать css и избегать растяжения.
img{ width:640px; background-size: cover; height:auto;}
Это равномерно растянет ваше изображение с подходящей высотой. Вы также можете попробовать установить для высоты конкретное число.
Вы можете добиться этого двумя способами, как показано ниже.
<img class = "xx" src = "http://placehold.jp/150x150.png">
.xx {
zoom: 200%;
}
.xx {
transform: scale(2);
}
The dimension attributes are not intended to be used to stretch the image.
Как вы уже упоминали, использование атрибута width не намерено растягивать изображение. поэтому в этом случае мы должны использовать transform: scale(2);, что является хорошей идеей, но это также может вызвать конфликт из-за наложения изображения на другой контент, поэтому лучше всего использовать 2x ширину div с изображением, масштабированным в 2 раза с помощью свойства css 'transform: scale(2);'
Следовательно: с использованием стиля ниже должно быть хорошей идеей.
.img2x_container {
width: 640px;
height: 480px;
}
.img2x_container img {
transform: scale(2);
}
This use case is only beneficial when we know the image height and width.
Вы можете использовать преобразование -> масштаб
img#imagId {
-ms-transform: scale(2); /* IE 9 */
-webkit-transform: scale(2); /* Safari 3-8 */
transform: scale(2);
}
Как правило, я не нашел статьи, описывающей способ масштабирования изображений с помощью клиентских технологий (оставьте механизм браузера) без потери качества.
С учетом сказанного, я боюсь, что если вам нужен лучший способ удвоить изображение в соответствии с Стандартные спецификации HTML, лучшим ответом будет использование другого изображения. Увеличенное изображение с помощью внутреннего процесса или 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>
Не могли бы вы добавить к своему ответу <img srcset = "">? <picture> - не всегда лучший выход. [Не используйте <picture> (большую часть времени)] (cloudfour.com/thinks/dont-use-picture-most-of-the-time/…)
Я использую следующий код 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;}
функция 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 };
}
они говорят, что если у вас есть изображение размером 320 пикселей, вы не должны увеличивать его дважды.