10 svar · 2 733 visningar · startad av apg29
Kan man med hjälp av CSS förminska bildens bredd och höjd om den är för stor?
Ja, det kan du.
Så här:
<img src="MinBild.jpg" style="height: 200px; width: 350px;" alt="Det här är min bild" />
Eller:
.anImage
{
height: 200px;
width: 100px;
}
[...]
<img src="MinAndraBild.jpg" class="anImage" alt="En bild på min hund" />
Men tänk på att hela bilden kommer att laddas ner och bilden kan se konstig ut om du inte har samma width/hight förhållande.
Men tänk på att hela bilden kommer att laddas ner och bilden kan se konstig ut om du inte har samma width/hight förhållande.
För att förhindra att du får ett felaktigt width/height-förhållande kan du "nöja dig" med att sätta endast antingen width eller height. Sätter du width anpassar sig höjden och tvärtom så att bilden behåller sitt rätta förhållande.
Och som GunnarD säger så kommer fortfarande hela bilden att laddas ned. Så om du har en bild från en 10 megapixel-kamera som du bara vill visa i storleken 400x300 så bör du använda PhotoShop eller liknande och beskära den.
Jättebra, tack för tipsen. När det gäller att få med storleken så har jag upptäckt att de går skriva:
width:200px; height:auto
Då får man med rätt höjd.
Jag tror att jag var lite otydlig. Jag menade om en bild var tillexempel 200x150 så skulleden inte förminskas, men om bilden är tillexempel 450x250 så ska css-scriptet känna av det och förminska den till exempelvis 400x200.
Går det göra?
Du kan använda max-width eller max-height för att sätta ett maxvärde för hur brett/högt något får vara. Exempel:
.myImage {
max-width: 200px;
}
[...]
<img src="Photo.jpg" alt="Foto över England" class="myImage" />
Detta gör att bilden inte blir bredare än 200px. Alltså - är den 150px bred händer inget, är den 240px bred minskas den till 200px. Men det finns inget sätt du kan sätta både maxbredd och maxhöjd med CSS utan att riskera att förstöra bredd/höjd-förhållandet. Då behöver du använda JavaScript (förslagsvis jQuery) eller liknande.
Du behöver inte ange "height: auto;" om du enbart sätter "width: 200px;". Höjden anpassar sig automatiskt så länge du inte anger den.
Tack Ledel för svaret, jag ska testa det!
Ett bra tips kan vara att lägga till
img { -ms-interpolation-mode: bicubic;}
i din css-fil. Då kommer nedskalade bilder att se betydligt bättre ut i IE7.
Tack, Baltiz. Ska kolla på det.
Förminska bild
Det bästa sättet och göra detta på är genom att skriva det på samma sätt som de ovan har skrivit det. Med hjälp av CSS.
Vad du måste ta reda på innan du förminskar bilderna är att du har rätt skala annars blir det som ovanför sa, att bilden kommer ej se bra ut, antingen för bred eller för hög.
Nu när det endast gäller 20-50 pixlar i bredd så är det okej att förminska bilder med CSS, men du måste också veta att hela bilden laddas, så ett tips är ifall bilden är låt oss säga som en vanlig bild tagen från en kamera är, det vill säga runt 3000 pixlar i bredd och 2000 pixlar i höjd och du vill förminska den, gör det isåfall i Adobe Photoshop eller i en annan bild editor annars kommer din hemsida vara otroligt långsam på att ladda.
Lycka till med hemsidan!
Tack, Paw.