Размер изображения до 50% от исходного размера в HTML

Я пытаюсь изменить размер изображения в HTML, он имеет ширину 314 пикселей и высоту 212 пикселей. Я хочу изменить его до 50% ...Размер изображения до 50% от исходного размера в HTML

, но при этом я получаю большее изображение вместо изображения полуразмерного размера.

<img src="image.jpg" width="50%" height="50%" />

Что я сделал не так? Благодаря

<html> 
    <head> 
    <title></title> 
    </head>  
    <body> 
     <div> 
     <img src="image4.png" width="50%" height="50%"/> 
     </div> 
    </body> 
</html>

Я решил вышеупомянутую проблему с помощью JQuery ниже:

$(document).ready(function(e) { 
     var imgs = document.getElementsByTagName('img'); 
     var imgLength = imgs.length; 

     for(var i=0; i<= imgLength-1;i++){ 

      var imgWidth = imgs[i].clientWidth; 
      var imgHeight = imgs[i].clientHeight; 

      $('img').eq(i).attr({width:imgWidth/2, height: imgHeight/2}); 

      console.log(imgWidth); 
     } 

     console.log(imgLength); 

    });

источник

2012-06-20 Sam

Ты ничего плохого не делаем здесь, это будет любая другая вещь, которая перекрывая размер изображения.

Вы можете проверить эту работу fiddle.

И в this fiddle Я изменил размер изображения, используя %, и он работает.

попробовать Кроме того, используя этот код:

<img src="image.jpg" style="width: 50%; height: 50%"/>

Here is пример скрипку.

источник

2012-06-20 10:31:25 Asif

браузера Я редактировал вопрос с кодом, который я написал. – Sam

Ну, этот код должен работать. В этом нет ничего плохого. – Asif

Есть ли ссылка на скрипку, которую я предоставил в ответ, работает для вас? Вы видите разницу размеров изображения здесь? Также попробуйте с атрибутом 'style', поскольку я дал – Asif

Процентная установка не учитывает исходный размер изображения. От w3schools:

В HTML 4.01 ширина может быть определена в пикселях или в% от содержащего элемента. В HTML5 значение должно быть в пикселях.

Кроме того, хороший совет практика из того же источника:

Подсказка: Уменьшение массы большое изображение с высоты и ширины атрибутов заставляет пользователя загрузить большое изображение (даже если он выглядит небольшим на страница). Чтобы этого избежать, перетащите изображение с помощью программы, прежде чем использовать ее на странице.

источник

2013-10-01 16:30:05

Что касается хорошей практики, есть законные причины для изменения размера клиента. Например, сглаживание. – iPherian

Мы можем сделать это css3 тоже. Попробуйте это:

.halfsize { 
    -moz-transform:scale(0.5); 
    -webkit-transform:scale(0.5); 
    transform:scale(0.5); 
} 

<img class="halfsize" src="image4.jpg">

подвергаются совместимости

источник

2015-12-27 08:22:42

Единственная проблема с этим подходом заключается в том, что она оставляет пробел вокруг элемента. Это связано с тем, что способ преобразования CSS заключается в следующем: элемент визуализируется, применяется преобразование, любые другие элементы вокруг него остаются там, где они были. –

Размер изображения до 50% от исходного размера в HTML

ответ

Смежные вопросы