I am using Sigil to create the epub.
I am viewing the final epub on both 6 inch e-reader and a much larger tablet.
I am trying to deal with an image issue to auto resize to fit the device.
Here is the code I am trying to use.
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="../Styles/Style0001.css" rel="stylesheet" type="text/css" />
<style type="text/css">
img { height:100%; width:100%;}
</style>
</head>
<body>
<div class="image"><img alt="Cover 2 Anne" height="1598" src="../Images/Cover%202%20Anne.jpg" width="1102" /></div>
</body>
</html>
The problem is it stretches the image in both directions, so I tried
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="../Styles/Style0001.css" rel="stylesheet" type="text/css" />
<style type="text/css">
img { height:100%; width:auto%;}
</style>
</head>
<body>
<div class="image"><img alt="Cover 2 Anne" height="1598" src="../Images/Cover%202%20Anne.jpg" width="1102" /></div>
</body>
</html>
but that seems to not help me either.
Any SIMPLE suggestions on fill in one direction only (whichever would come first) and then keeping the other dimension proportionate?