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

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

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

<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); 

    });

Ответы

Ответ 1

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

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

И в эта скрипка Я изменил размер изображения с помощью %, и он работает.

Также попробуйте использовать этот код:

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

Вот пример скрипта.

Ответ 2

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

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

<img class="halfsize" src="image4.jpg">
  • подвергается совместимости с браузером

Ответ 3

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

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

Кроме того, рекомендации по эффективной практике из того же источника:

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