1

HTML で電子ブックを書いて、Kindlegen で MOBI に変換しています。画像がページ全体を占めないようにしたい。ただし、一部の画像はまさにそれを行っています。

複数の CSS スタイルを試しましたが、何も変わらないようです。Kindle Previewer、iPhone X、kindle paper white (古いデバイス)、および iPad でテストしています。これらのデバイスはすべて CSS に対して異なる反応を示すようで、iPad は私のイメージ スタイルを完全に無視しているようです。何を設定しても、iPAD の画像は変わりません。画像が大きすぎないようにするにはどうすればよいですか? テキストも同じページに表示されるように、画像を十分に小さくしたいと思います。画面の約 30% を超えないことが理想的です。

パーセンテージを設定してみました

width: auto;
height: 30%;

と設定em

width: auto;
height: 20em;

使用すると、Kindlegen からエラーが発生しますmax-height

.image {
  width: auto;
  height: 30%;
}

.centerImg {
  text-indent: 0;
  margin: 1em 0 0 0;
  padding: 0;
  text-align: center;
}

<!-- Page 29 -->
    <p class="centerImg">
      <img class="image" alt="lock" src="images/page29.jpg" />
    </p>
    <p class="collector">
      Text
    </p>
    <br />
    <p class="description">
      Text
    </p>
    <div class="pagebreak"></div>

これを行う最善の方法は何ですか？

4

1 に答える 1

0

Amazon の電子ブックでの CSS は、少し気が遠くなる可能性があります。レイアウトが意図したとおりに機能しない主要なベストセラーを見たことさえあります。すべてのデバイスでまったく同じように見える電子ブックを手に入れたことはありませんが、画像のサイズを満足のいくものにすることができました。編集には無料のプログラムSigil.mobiを使用し、Calibreで変換します。

CSS は電子ブックでは非常に信頼できない場合があるため、HTML 自体で画像のサイズを変更しました。

<div align="center"><img height="148" src="../Images/stars-300.jpg" width="200"/></div>
<br/>
  <h1 class="cinz" id="sigil_toc_id_21">-21-</h1>
<br/>
<h1 class="toocinz sigil_not_in_toc">Between Worlds</h1>

以下は、Kindle Paperwhite での上記のコードのイメージです。iPad では、画像が少し小さくなり、間隔の一部が異なりますが、十分近くに見えます。あなたのスタイルを電子ブックに「強制」するために私が使ったもう 1 つのトリックは、2 つの CSS スタイルシートを使うことです。最初のものは単に 2 番目の「本物の」ものを指します。これにより、カスタム スタイルをオーバーライドするデフォルト スタイルの一部を回避できます。どれだけうまく機能したかはわかりませんが、害はありません。

Style0001.cssには次の行しかありません: @import url(../Styles/Style0002.css); Style0002.cssは、すべての実際のスタイリングがある場所です。私の本のすべてのページは、最初のスタイルシートにリンクしています:

<link href="../Styles/Style0001.css" rel="stylesheet" type="text/css"/>.

ここに画像の説明を入力

于 2019-06-02T03:07:07.970 に答える