Ik probeer het formaat van een afbeelding in HTML te wijzigen, deze heeft een breedte van 314px en een hoogte van 212px. Ik wil het formaat wijzigen naar 50%…
maar als ik dit gebruik, krijg ik nog steeds een grotere afbeelding in plaats van een afbeelding op halve grootte.
<img src="image.jpg" width="50%" height="50%" />
Wat heb ik verkeerd gedaan?
Bedankt
<html>
<head>
<title></title>
</head>
<body>
<div>
<img src="image4.png" width="50%" height="50%"/>
</div>
</body>
</html>
Ik heb het bovenstaande probleem opgelost met behulp van onderstaande 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);
});
Antwoord 1, autoriteit 100%
Je hebt hier niets verkeerd gedaan, het zal iets anders zijn dat de afbeeldingsgrootte overschrijft.
Je kunt deze werkende vioolcontroleren.
En in deze vioolheb ik de afbeeldingsgrootte gewijzigd met %, en het werkt.
Probeer ook deze code te gebruiken:
<img src="image.jpg" style="width: 50%; height: 50%"/>
Hier isde voorbeeldviool.
Antwoord 2, autoriteit 17%
We kunnen dit ook met css3 doen. Probeer dit:
.halfsize {
-moz-transform:scale(0.5);
-webkit-transform:scale(0.5);
transform:scale(0.5);
}
<img class="halfsize" src="image4.jpg">
- onderworpen aan browsercompatibiliteit
Antwoord 3, autoriteit 14%
De procentuele instelling houdt geen rekening met de oorspronkelijke afbeeldingsgrootte. Van w3schools :
In HTML 4.01 kan de breedte worden gedefinieerd in pixels of in % van het bevattende element. In HTML5 moet de waarde in pixels zijn.
Ook advies over goede praktijken van dezelfde bron :
Tip: als u een grote afbeelding verkleint met de attributen height en width, wordt een gebruiker gedwongen de grote afbeelding te downloaden (zelfs als deze er klein uitziet op de pagina). Om dit te voorkomen, schaalt u de afbeelding opnieuw met een programma voordat u deze op een pagina gebruikt.
Antwoord 4, autoriteit 6%
Je kunt de xdescriptor van het srcsetattribuut als zodanig gebruiken:
<!-- Original image -->
<img src="https://fr.wikipedia.org/static/images/mobile/copyright/wikipedia.png" />
<!-- With a 80% size reduction (1/0.8=1.25) -->
<img srcset="https://fr.wikipedia.org/static/images/mobile/copyright/wikipedia.png 1.25x" />
<!-- With a 50% size reduction (1/0.5=2) -->
<img srcset="https://fr.wikipedia.org/static/images/mobile/copyright/wikipedia.png 2x" />