Hoe maak ik een afbeelding kleiner met CSS?

Ik heb deze paginaen ik heb gebruikers die een pictogramafbeelding uploaden voor de bedrijfstakken en ze uploaden een grotere afbeelding. Ik wil het formaat wijzigen via CSSen het snijdt het af wanneer het wordt gewijzigd in Firebug. Om te zien wat ik bedoel, selecteert u “detailhandel” in de bovenste vervolgkeuzelijst “Selecteer branchecategorie” en selecteert u vervolgens “Algemeen” bij “Bedrijfstype selecteren” en u ziet de vreemd gevormde afbeelding. Het moet 56 pixels * 52 pixels zijn.

Hier is mijn HTML:

<span class="icon select-business-icon" style="background-image: url(https://posnation.com/shop_possystems/image/data/icons/retail.png);">&nbsp;</span> 

Ik heb in de CSS geprobeerd de breedte en hoogte in te stellen op de gewenste afmetingen, maar het enige wat het deed was de afbeelding afkappen en niet het formaat wijzigen.

Antwoord 1, autoriteit 100%

Dit is wat ik heb gedaan:

.resize {
    width: 400px;
    height: auto;
}
.resize {
    width: 300px;
    height: auto;
}
<img class="resize" src="example.jpg"/>

Hierdoor blijft de beeldverhouding hetzelfde.

Antwoord 2, autoriteit 47%

Je kunt het formaat van afbeeldingen prima wijzigen met CSS als je een afbeeldingstag aanpast:

<img src="example.png" style="width:2em; height:3em;" />

U kunt een eigenschap van een achtergrondafbeelding niet schalen met CSS2, hoewel u de CSS3-eigenschap background-sizekunt proberen.

Wat u daarentegen wel kunt doen, is een afbeelding nesten in een span. Zie het antwoord op deze vraag: Css-achtergrond uitrekken en schalen

Antwoord 3, autoriteit 26%

CSS 3 introduceert de achtergrondgrootte, maar de ondersteuning is niet universeel.

Als de browser het formaat van de afbeelding aanpast, is dit echter inefficiënt, de grote afbeelding moet nog steeds worden gedownload. U moet het formaat aan de serverzijde wijzigen (het resultaat in de cache plaatsen) en dat in plaats daarvan gebruiken. Het gebruikt minder bandbreedte en werkt in meer browsers.

Antwoord 4, autoriteit 21%

Je kunt dit proberen:

-ms-transform: scale(width,height); /* IE 9 */
-webkit-transform: scale(width,height); /* Safari */
transform: scale(width, height);

Voorbeeld: afbeelding “groeit” 1,3 keer

-ms-transform: scale(1.3,1.3); /* IE 9 */
-webkit-transform: scale(1.3,1.3); /* Safari */
transform: scale(1.3,1.3);