2016-08-18 14 views
1

とともに大幅に縮めている私が持っている:画像のキャプション(テキスト)は、画像

<div style="min-width: 1000px;"> 
    <p> 
     Some text 
    </p> 
    <div class='div_img_left'> 
     <img src="images/sth.png" alt="missing image" style="max-width: 100%;"> 
     <footer>My caption</footer> 
    </div> 
</div> 


.div_img_left { 
    max-width: 50%; 
    float: left; 
    margin-right: 30px; 
    margin-bottom: 2em; 
    text-align: center;  
} 

それは私のPCの画面上で罰金を見ています。問題は私の携帯電話で開くときに始まります。ここでの問題は、画面に1000pxの画面幅がないことです。だからすべてが縮小する。問題は「一部のテキスト」がうまく見えるということです。残念ながら、「私のキャプション」は大幅に縮小しています。これをどうすれば解決できますか?

他の幾何学的制約を使用しようとしましたが失敗しました。具体的には%または分の高さを使用します。

+1

あなたは(https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen- [ 'viewport'メタタグ]を使用していますsite/responsive?hl = en#add-a-viewport)? – showdev

+0

@showdevいいえ、ありがとうございます。それは私の問題を解決するようです。私がそれを受け入れることができるように答えに書いてください。 –

+0

ああ、素晴らしい!私はそのようにあなたの問題のすべてを解決するとは思っていませんでしたが、それは始めるのに適しています。 [その記事](https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/responsive)には、レスポンシブウェブサイトに関する他の有益な情報があります。[メディアクエリ](https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries)。 – showdev

答えて

-1

レスポンシブサイトをご希望の場合は、メディアクエリを使用して、このような大きな数字に設定しないでください。min-width幅はvwを使用してください。

.div_img_left { 
 
    max-width: 50vw; 
 
    float: left; 
 
    margin-right: 30px; 
 
    margin-bottom: 2em; 
 
    text-align: center; 
 
    
 
} 
 
figcaption { 
 
    font-size: 1em; 
 
    line-height: 1.3; 
 
    text-align: center; 
 
} 
 
@media (max-width: 500px) { 
 
    figcaption { 
 
    font-size: 14px; 
 
    line-height: 1 
 
    min-width: 100%; 
 
    } 
 
    figure { 
 
    min-width: 100vw; 
 
    } 
 
}
<div style="width: 100%;"> 
 
    <!--changed from min-width: 1000px--> 
 
    <p> 
 
    Some text 
 
    </p> 
 
    <figure class='div_img_left'> 
 
    <img src="http://placehold.it/150x200/eea/e00?text=150x200" alt="missing image" style="max-width: 100%;"> 
 
    <figcaption>My caption</figcaption> 
 
    </figure> 
 
</div>

関連する問題