Thay đổi kích thước hình ảnh thành 50% kích thước ban đầu trong HTML

Tôi đang cố gắng kích thước lại hình ảnh bằng HTML, nó có chiều rộng 314px và chiều cao là 212px. Tôi muốn đổi kích thước lại thành 50% ...Thay đổi kích thước hình ảnh thành 50% kích thước ban đầu trong HTML

nhưng sử dụng điều này tôi vẫn có được hình ảnh lớn hơn thay vì một hình ảnh có kích thước bằng một nửa.

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

Tôi đã làm gì sai? Cảm ơn

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

tôi giải quyết vấn đề trên bằng jquery dưới đây:

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

    });

Nguồn

2012-06-20 Sam

Bạn đã không làm điều gì sai trái ở đây, nó sẽ bất cứ điều gì khác mà là trọng kích thước hình ảnh.

Bạn có thể kiểm tra hoạt động này fiddle.

Và trong this fiddle Tôi đã thay đổi kích thước hình ảnh bằng cách sử dụng % và đang hoạt động.

Ngoài ra hãy thử sử dụng mã này:

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

Here is ví dụ fiddle.

Nguồn

2012-06-20 10:31:25 Asif

Tôi chỉnh sửa các câu hỏi với mã mà tôi đã viết. – Sam

Mã này phải hoạt động..không có gì sai trong nó .. – Asif

Liên kết fiddle mà tôi đã cung cấp có trả lời phù hợp với bạn không? Bạn có thấy sự khác biệt về kích thước hình ảnh ở đây không? Ngoài ra hãy thử với thuộc tính 'style' như tôi đưa ra – Asif

Cài đặt phần trăm không tính đến kích thước hình ảnh gốc. Từ w3schools:

Trong HTML 4.01, chiều rộng có thể được xác định bằng pixel hoặc% của phần tử chứa. Trong HTML5, giá trị phải bằng pixel.

Ngoài ra, lời khuyên thực hành tốt từ cùng một nguồn:

Mẹo: Thu hẹp một hình ảnh lớn với chiều cao và các thuộc tính chiều rộng buộc người dùng phải tải về hình ảnh lớn (thậm chí nếu nó trông nhỏ trên trang). Để tránh điều này, hãy rescale hình ảnh với một chương trình trước khi sử dụng nó trên một trang.

Nguồn

2013-10-01 16:30:05

Về thực hành tốt, có lý do chính đáng để muốn thay đổi kích thước của khách hàng. Chống răng cưa chẳng hạn. – iPherian

Chúng tôi cũng có thể làm điều này bằng css3. Hãy thử điều này:

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

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

bị trình duyệt tương thích

Nguồn

2015-12-27 08:22:42

Vấn đề duy nhất với phương pháp này là nó để khoảng trắng xung quanh phần tử. Điều này là do cách chuyển đổi CSS hoạt động là: phần tử này được kết xuất, biến đổi được áp dụng, bất kỳ phần tử nào khác xung quanh nó vẫn còn ở nơi chúng đang hoạt động. –

Thay đổi kích thước hình ảnh thành 50% kích thước ban đầu trong HTML

Trả lời

Các vấn đề liên quan