Log in / Register

Forum › How do I...?

...crop an image using a div whilst keeping the aspect ratio

cjconnor24
I have an image inside a div which is a set size. However because the div is square and the image is not - the image needs to bleed off.

For web the html would be as follows:

<div style="height:600px;width:600px;border:1px solid #CCC;overflow:hidden;display:block;">
<img src="img/image01.jpg" style="height:600px;width:900px;display:block;" />
</div>

which works and looks good however when i run through prince it just squashes the image?

Any way around this?

Thanks
jim_albright
By bleed off do you mean that you want the picture to be cropped or print past the margin.
Bleeding is printing to the margin and beyond.

Jim Albright
Wycliffe Bible Translators

cjconnor24
the picture should be cropped by the div.
cjconnor24
Here is some example code to show what is happening - if you run this through prince you will see what i mean.

In a normal browser, the image is essentially cropped - but in prince it loses the aspect ratio and just squashes?

Any help appreciated! I've also attached a graphic to show what i mean.

princeGraphic.png


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<style type="text/css">
@page {
	size:A5 landscape;
	padding:3mm;
	margin:0;
}
* {
	padding:0;
	margin:0;
}
body {
	font-size:7pt;
}
p, img {
	margin:0 0 5mm 0;
}
</style>
</head>

<body>

<p>Here is the image just with a height of 5cm:</p>
<img src="http://www.allhouservices.com/house2.jpg" style="height:5cm;" />

<p>Here is the DIV with the exact same styled image is above - instead of overflowing the div the image is squashed.</p>
<div style="display:block;height:5cm;width:5cm;border:5px solid #000;overflow:hidden;">
<img src="http://www.allhouservices.com/house2.jpg" style="height:5cm;" />
</div>




</body>
</html>


i should say that i do not own that image - it's merely for demonstration purposes.

Thanks
  1. princeGraphic.png‎ 89.5 kB
cjconnor24
* bump *
mikeday
The issue here is that our default style sheet for HTML applies "max-width: 100%" to img elements to ensure that large images fit on a single page. You can override this by applying "max-width: none" to the img element, then it will overlap the div and be clipped, the same as the browser.
cjconnor24
perfect, thanks :D can't believe i didn't think to check the default styles!!