Quote:
Originally Posted by Quoth
No need for media queries. Obviously the image CSS is wrong.
|
As I said already, it displays correctly on other devices.
Image HTML:
Code:
<body class="calibre">
<p class="centered"><img alt="296482.png" class="frame" src="image/296482.png"/></p>
CSS:
Code:
.calibre {
-epub-hyphens: auto;
-webkit-hyphens: auto;
border-width: 0;
display: block;
margin-bottom: 0;
margin-left: 18pt;
margin-right: 18pt;
margin-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0
}
.centered {
-epub-hyphens: none;
-webkit-hyphens: none;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 14px;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
text-align: center;
text-indent: 0
}
.frame {
height: auto;
max-width: 100%;
}
Result: an 800px-wiide image fills about a third of the screen width (as I already said above).
Change .frame as follows:
Code:
.frame {
height: auto;
width: 150%;
}
The image now occupies about 70% of the screen width (as I already said above).
So pray, do tell me in what way the CSS is wrong.