Ik vroeg me af of in de breedte en hoogte <img>attributen, ik zou de breedte en hoogte kunnen specificeren als percentages?
Nou, ik denk dat dat voor de hand ligt, want wanneer ik het zo probeer, is het het formaat, maar het lijkt de kwaliteit van mijn afbeelding te schieten.
Hier is een voorbeeld van mijn markup met vaste attributen:
<img src="#" width="346" height="413">
Nu, terwijl u dit probeert op te schalen, tegen de helft, met de helft, via percentages:
<img src="#" width="50%" height="50%">
Ik krijg iets heel anders dan:
<img src="#" width="173" height="206.5">
Ik denk dat ik gewoon fundamenteel mijn percentage markering of iets vergist, omdat er een merkbaar verschil is tussen mijn tweede en derde voorbeeld visueel.
Antwoord 1, Autoriteit 100%
Opmerking : het is ongeldig om percentages direct te verschaffen als <img>widthof heightattribuut tenzij U gebruikt HTML 4.01 (zie huidige spec , verouderde spec en Dit antwoord voor meer details). Dat gezegd hebbende, zullen browsers vaak dergelijk gedrag tolereren om achterwaartse compatibiliteit te ondersteunen.
Die percentagebreedten in uw 2e voorbeeld zijn daadwerkelijk aanvragen op de container uw <img>is in, en niet de werkelijke grootte van het beeld. Stel dat u de volgende markup hebt:
<div style="width: 1000px; height: 600px;">
<img src="#" width="50%" height="50%">
</div>
Uw resulterende afbeelding wordt 500px breed en 300px lang.
jQuery formaat wijzigen
Als u probeert een afbeelding te verminderen tot 50% van de breedte, kunt u het doen met een fragment van jQuery:
$( "img" ).each( function() {
var $img = $( this );
$img.width( $img.width() * .5 );
});
Zorg ervoor dat u eerst een hoogte / breedte = 50% -attributen opstijgt.
Antwoord 2, Autoriteit 34%
U kunt een of de andere (gewoon niet beide) instellen als dat het gewenste resultaat moet krijgen.
<img src="#" height="50%">
Antwoord 3, Autoriteit 11%
Hier is het verschil:
Hiermee stelt u de afbeelding in op de helft van de oorspronkelijke grootte.
<img src="#" width="173" height="206.5">
Hiermee stelt u de afbeelding in op de helft van het beschikbare presentatiegebied.
<img src="#" width="50%" height="50%">
Als u bijvoorbeeld dit als het enige element op de pagina plaatst, zou het proberen 50% van de breedte van de pagina op te nemen, waardoor het mogelijk groter is dan de oorspronkelijke grootte van de helft je verwacht.
Als het wordt weergegeven in een groter formaat dan het oorspronkelijke formaat, ziet de afbeelding er sterk korrelig uit.
Antwoord 4, autoriteit 9%
Probeer scale-eigenschap te gebruiken in css3:
75% van origineel:
-moz-transform:scale(0.75);
-webkit-transform:scale(0.75);
transform:scale(0.75);
50% van origineel:
-moz-transform:scale(0.5);
-webkit-transform:scale(0.5);
transform:scale(0.5);
Antwoord 5, autoriteit 2%
width=”50%” en height=”50%” stellen de breedte- en hoogtekenmerken in op de helft van de breedte en hoogte van het bovenliggende element als ik me niet vergis. Als u alleen de breedte of hoogte instelt, moet de breedte of hoogte worden ingesteld op het percentage van het bovenliggende element, als u procenten gebruikt.
Antwoord 6, autoriteit 2%
Gezien het gebrek aan informatie over de oorspronkelijke afbeeldingsgrootte, zou het specificeren van percentages voor de breedte en hoogte resulteren in zeer grillige resultaten. Als u ervoor wilt zorgen dat een afbeelding op een specifieke locatie op uw pagina past, moet u server-side code gebruiken om die schaalvergroting te beheren.
Antwoord 7
Van W3Schools
De hoogte in procenten van het bevattende element (zoals “20%”).
Dus ik denk dat ze het element bedoelen waar de div zich in bevindt?
Antwoord 8
Er is eigenlijk een manier om dit alleen met html te doen. Stelt gewoon in:
<img src="#" width height="50%">