Plucera Webbyrå
- Webbdesign och grafisk formgivning

Få offert inom 24h

Blogg

«
»

IMG border-radius workaround

16 december 2009

Med lite hjälp av jQuery kommer här en lösning på problemet att lägga border-radius på bilder. Lösningen involverar att konvertera img-taggen till en div med samma bild som bakgrundsbild istället. Fungerar alltså inte i Internet Explorer just nu.

XHTML

<body>
<img src="vinter.jpg" class="bild" />
</body>

JS

<script type="text/javascript">
    $(document).ready(function() {
        $(".bild").each(function(){
            var div = "<div class="bild" style="background-image:"+
                      "url('"+ this.src + "'); width: "+ this.width +"px; "+
                      "height: "+ this.height +"px;">";
            $(this).replaceWith(div);
        });
    });
</script>

CSS

<style type="text/css">
    DIV.bild, IMG.bild { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
</style>

Slit det med hälsan!

Taggar:
Postat i:Teknik, Webbdesign
Kommentarer:Inga kommentarer »

"Plucera Webbyrå i Helsingborg, Skåne, arbetar med webbdesign vilket innebär att vi bygger webbsidor, främst i verktyget WordPress. Våra webbsidor är unikt formgivna och fungerar i alla moderna webbläsare. Vi arbetar även med sökmotoroptimering, SEO, och konsultation inom social media som Facebook & Twitter. Många av våra kunder hjälper vi dessutom med formgivning av trycksaker, som årsredovisningar, reklamfoldrar och visitkort. Vi kan även designa logotyper."

"Vi arbetar med kunder i hela Sverige, så söker du t.ex. webbyrå i Helsingborg eller webbyrå i Ängelholm kan vi hjälpa Er."

  • © 2003-2013 Plucera AB
  • Post- och besöksadress: Plucera AB, Nedre Långvinkelsgatan 34, 252 34 Helsingborg
  • Ring till oss: 0431-37 11 00
  • E-posta oss: info@plucera.se