It helps to resize and crop any image dynamically for pre-defined position on a web page. The resized and cropped image is used in the web pages. There is a way where we can move the cropped image around within the div.
- Regular width and height that squeeze the image to fit in that pre-defined position.
Example:<!DOCTYPE html><html><head><!-- Style to set the height and widthof image --><style>img {width:200px;height:120px;border:2px solid green;}</style></head><bodystyle="text-align:center"><imgsrc=</body></html>Output:
- Regular width, height and background position using the image as a background image that fit in that pre-defined position (randomly cropped).
Example:<!DOCTYPE html><html><head><style>div {background-image:url(width:200px;height:120px;background-position:center;border:2px solid green;}</style></head><body><center><div></div></center></body></html>Output:
- It is the final procedure to cropped the image and also it can be resized. In this method we can move the image within the div. Use negative margin to move the image around within the div.
Example:
<!DOCTYPE html><html><head><style>.crop {width: 200px;height: 120px;overflow: hidden;border:2px solid green;}.crop img {width: 450px;height: 300px;margin: -30px 0 0 -280px;}</style></head><body><center><divclass="crop"><imgsrc=alt="cropped image"></div></center></body></html>Output:
