1

例えば60%のペアレント幅の画像を導入するとしたら、どうやって画像と側にある縦書きキャプションの高さを画像の高さと合わせればいいでしすか。望ましい結果は、下図のようです。

画像の説明をここに入力

様々な問題が出ています。例えば、このようにすると、本文はの外になっています(Chromeブラウザーの開発者ツールで発見しました):

.gazou-yoko{
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    width: 100%;
  }
  
 .gazou-yoko div:first-child{
   width: 60%;
 }
 
 .gazou-yoko div:first-child img{
   width: 100%;   
 }
 
  .gazou-yoko div:nth-child(2) div{
    writing-mode: vertical-rl;
    background-color: #FFA07A;
  }
<div class="gazou-yoko">
  <div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/4/47/LamborghiniMurcielagoLP640Versace2.JPG">
  </div>
  <div>
    <div>
    ムルシエラゴ(Murciélago )は、イタリアの自動車メーカーランボルギーニが2001年から2010年にかけて製造したスーパーカー。「ムルシエラゴ」はスペイン語で「コウモリ」の意味。(情報源:<a href="https://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8">Wikipedia</a>)
    </div>
  </div>
</div>

そのほかに、横書きの<div>は勝手に高さ設定する事があります。

1 件の回答 1

1
+50

Javascriptを利用して、画像の高さを取得して、文字列に付与した方がいいと思います。

   <!DOCTYPE html>

<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">

  <link rel="stylesheet" href="http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
  <style>

.row {
  display: table;
}

[class*="col-"] {
  float: none;
  display: table-cell;
  vertical-align: top;
}

.text_div {
  writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;            /* IE用 */
  -webkit-writing-mode: vertical-rl;  /* chrome用 */
  -o-writing-mode: vertical-rl;       /* opera用 */
  background-color: #FFA07A;
}

img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
  </style>
  
  <script type="text/javascript">
  $(function() {
  $(".text_div").height($("img").height());
  $(window).resize(function() {
$(".text_div").height($("img").height());
  });
  });
  </script>
</head>
<body>
  <div class="row row-eq-height">
<div class="col-md-6">
  <img src="https://upload.wikimedia.org/wikipedia/commons/4/47/LamborghiniMurcielagoLP640Versace2.JPG"></img>
</div>
<div class="col-md-2">
</div>
<div class="col-md-2 text_div">
<div class="text_div">
	ムルシエラゴ(Murciélago )は、イタリアの自動車メーカーランボルギーニが2001年から2010年にかけて製造したスーパーカー。「ムルシエラゴ」はスペイン語で「コウモリ」の意味。(情報源:<a href="https://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8">Wikipedia</a>)
</div>
</div>
<div class="col-md-2">
</div>
  </div>
</body>

</html>
 スニペットを

6
  • ご解決、誠にありがとうございます。恐れ入りますが、ご解決はレスポンシブそうもありません。ご解決をChromeから確認致しましたのですが、ウインドウの幅を変えると、キャプションの幅が正しく変わりません、しかもキャプションコンテイナーの幅は0です。
    – 徳川武
    Commented 2016年12月16日 7:12
  • @Gurebu Bokofu ソースコードを修正しました。Bootstrapを導入しました。確認していただけないでしょうか。 Commented 2016年12月16日 8:10
  • ご修正、感謝します。残念ながら、Chromeから閲覧しますと、横書きですが漢字が左90度に向き、IEから閲覧しますと、完全に横書きです。ご解決を更にJSFiddleにコピー致しました。
    – 徳川武
    Commented 2016年12月17日 13:34
  • @Gurebu Bokofu 度々すみませんが、ソースコードをさらに修正しました。お手数ですが、確認していただけないでしょうか。 Commented 2016年12月17日 14:58
  • ご苦労様でした。縦書きが達されましたようです。ご解決ありがとうございます。誠に申し訳ございませんが、お礼コンテストなので、直ぐはお礼を差し上げられなく、コンテストの期間終了の直前入賞者を選ばなければなりません。しばらくお待ち下さい。
    – 徳川武
    Commented 2016年12月18日 1:26

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。