Menu
I have 5 browsers for rendering html coded pages: IE9, Firefox 4.0 and all the newest versions of Chrome, Safari and Opera. Now in IE9 and Firefox 4.0 an image is being cropped properly in using border-radius: and -moz-border-radius: but fails in Opera, Chrome and Safari using -webkit-border-radius:. With Opera the image is not being cropped at all and with Safari and Chrome the image is somewhat cropped but with the border being cropped out as well.
.nonTyp{
margin: 15px 15px 15px 15px;
border:4px inset #C1C8DD;
border-radius:25px;
-moz-border-radius:25px;
-webkit-border-radius:25px;
width:200px;
height:200px;
}
If you have one of the 3 browsers mentioned that utilize -webkit-border-radius: please view images for example of what I have an issue with: Graphics Page
360
Select the Picture Tools > Format tab and select Crop. There are different ways to crop your picture: Drag a cropping handle to crop it from the side, top, or bottom. Press Shift to crop the entire photo down to the size you want.
In order to use the Crop command located in the Image menu, you need to have an active selection in your image. The Crop command doesn't offer any options, it simply crops your image to the boundaries of your selection.
Both require careful consideration as they can affect image quality. Resizing changes the dimensions of the image, which usually affects the file size (and, thereby, image quality). Cropping always involves cutting away part of the original image and results in some of the pixels being discarded.
The Crop tool in most image processing programs is used to trim off the outside edges of a digital image. Cropping can be used to make an image smaller (in pixels) and/or to change the aspect ration (length to width) of the image.
What you could do is put all styling that's on the <img> tag now, on the parent <a> instead so as to use it as the container for the image. This, at least to me, makes more sense as well. Don't forget to keep float: left on the image to get rid of phantom bottom margin either.
119
I think it's because it is in the foreground above the border
try using the same code you have above, but in your html:
<div class="nonTyp" style="background-image:url('image.jpg');"></div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
