0

I have the following problem: jsfiddle.

As you can see from the example, Opera (ver. 12.16) doesn't clip the borders of the image that is positioned inside a div. It returns a div with rounded corners, but fails to hide overflowed image corners. In other browsers no such problem persists. My code:

<div style="overflow:hidden; border-radius:200px; width:200px; height:200px; border:1px solid black;">
    <img src="http://www.blogcdn.com/www.autoblog.com/media/2012/06/lamborghini-aventador-f16-fighting-falcon.jpg" style=" width:200px; height:200px; ">
</div>

Is there a way to solve this?

user1190478
  • 119
  • 1
  • 11

3 Answers3

0

Yes. Upgrade to Opera 17, which is based on Google Chromium, eg. the same as Chrome. This should make rendering be similar to Chrome and other browsers.

Per Lundberg
  • 3,837
  • 1
  • 36
  • 46
  • 1
    Very smart. And tell all opera users on the internet to do the same. – Aleks G Oct 13 '13 at 19:59
  • 1
    Yes? Browsers which aren't evergreen (= auto-updating) are evil... And also, Opera is really, really small if you look at the market share. So why bother with supporting an outdated version of it? I cannot really see why down voting this is justified... – Per Lundberg Oct 13 '13 at 20:09
  • Imagine you are working on a project at work and when a bug is reported to you, your response is, "oh, i don't care about it, because it's not that important." How long will your tenure there last? – Aleks G Oct 13 '13 at 20:16
  • Thanks for your reply Per Lundberg. However, @Aleks G is correct. I can't make all opera users to update their browsers to the latest version of Opera. If I'm not mistaken, Opera has the support of border-radius property since version 10.50. Which means that it should also be able to round the corners of any content inside the wrapper div. So I wanted to find out whether there is any solution to this problem. – user1190478 Oct 13 '13 at 20:25
  • @AleksG: First of all, it wasn't apparent in the question that the OP even knew about the existence of the newer versions - I added this now and made it more clear that we specifically want a solution for Opera 12. And, to answer your "oh I don't care" note, I think it is actually important to question requirements also, even when coming from a superior, or better, customer. This is actually a quite important part of the development process also. – Per Lundberg Oct 14 '13 at 05:46
  • @user1190478: Fair enough, I can agree to that. I don't know about the Opera-specifics though, but I updated your question a bit to make this detail more obvious at a glance. – Per Lundberg Oct 14 '13 at 05:46
  • Just to let you know, I downloaded Opera and installed it on my Linux machine; guess what? It's a version 12! – Fardin K. Nov 20 '13 at 10:31
  • 1
    all, this isn't just an opera issue. it's a webkit issue. affects any browser using webkit: opera, dolphin, safari, android default: http://stackoverflow.com/questions/8705249/css-border-radius-not-trimming-image-on-webkit – dewd Mar 14 '14 at 16:19
0

If it's appropriate add border-radius directly inside to <img> tag style.

Muhammad Ababekri
  • 135
  • 3
  • 13
  • No, in my test page that image, as well as the wrapper div have absolute positioning. Besides, the image doesn't have the size of the wrapper div. It is bigger than the parent div. – user1190478 Oct 13 '13 at 20:16
0

It's a bug and it's not possible in Opera 12.16 and lower to wrap the corners of the image inside the wrapper div.

It can be solved by giving the parent(wrapper) div relative positioning, appending the image as a background image and positioning it using its top and left coordinates.

If the image is big it should be resized using its background-size property.

Here is the updated jsfiddle link: jsfiddle

<div style="position:relative; overflow:hidden; border-radius:200px; width:200px; height:200px; border:1px solid black; background-image:url(http://www.blogcdn.com/www.autoblog.com/media/2012/06/lamborghini-aventador-f16-fighting-falcon.jpg); background-size:200px 200px;"></div>
user3404843
  • 169
  • 1
  • 4