16
dec
IMG border-radius workaround
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!