31181


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

[![画像の説明をここに入力](https://i.stack.imgur.com/MNyEY.png)](https://i.stack.imgur.com/MNyEY.png)

様々な問題が出ています。例えば、[このよう](https://jsfiddle.net/62tjhmn0/)にすると、本文はの外になっています（Chromeブラウザーの開発者ツールで発見しました）：

[code]

    .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;
      }
[/code]

[code]

    <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>
[/code]

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


CC BY-SA 3.0
2016-12-14T01:37:07.677
31134
2016-12-17T14:57:26.543
2016-12-16T08:01:39.393
76
16876
question
html css
縦書きキャプションを画像の高さとレスポンシブ的に合わせる


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

[code]

       <!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>
     スニペットを
[/code]


CC BY-SA 3.0
2016-12-16T06:48:40.787
31181
2016-12-17T14:57:26.543
2016-12-17T14:57:26.543
13152
13152
31134
answer