how to make contents fit to div box by using css?

Question

Welcome To Ask or Share your Answers For Others

how to make contents fit to div box by using css?

asked Feb 6, 2021 in Technique[技术] by 深蓝 (71.8m points)

body {margin:0;
      padding:0;}
      
img {width:100%;
     height:auto;}
     
a { text-decoration:none; }  

.box50 {width:50%;
        height:auto;
        float:left;}

#bigbox {width:100%;
         height:auto;
         display:block;
         overflow:hidden;}
         
.box50_tr {display: inline-block;
    width: 100%;}        

.box50_td {
    width: 100%;
    display: block;
}

<div id="bigbox">
        <div class="box50">
            <img src="https://www.rakuten.ne.jp/gold/sappun/promotion/20201231/test_07.jpg">
        </div>
        
        <div class="box50">
            <table cellpadding="0" cellspacing="0" style="display:inline-block;">
                <tr class="box50_tr">
                    <td class="box50_td"><img src="https://www.rakuten.ne.jp/gold/sappun/promotion/20201231/test_08.jpg"></td>
                </tr>
                <tr class="box50_tr">
                    <td class="box50_td"><img src="https://www.rakuten.ne.jp/gold/sappun/promotion/20201231/test_09.jpg"></td>
                </tr>
            </table>
        </div>
    </div>

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

306 views

1 Answer

深蓝 · Answer 1 · 2021-02-06T00:27:31+0000

Make your image img {width: 100%; height: 100%;}
Make your bigbox class display: flex .

Code below -

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {margin:0;
      padding:0;}
      
    img {
    width: 100%;
    height: 100%;
}
     
a { text-decoration:none; }  

.box50 {width:50%;
        height:auto;
        float:left;}

#bigbox {width:100%;
         height:auto;
         display:block;
         overflow:hidden;
         display: flex;}
         
.box50_tr {display: inline-block;
    width: 100%;}        

.box50_td {
    width: 100%;
    display: block;
}
  </style>
</head>
<body>
  <div id="bigbox">
    <div class="box50">
        <img src="https://www.rakuten.ne.jp/gold/sappun/promotion/20201231/test_07.jpg">
    </div>
    
    <div class="box50">
        <table cellpadding="0" cellspacing="0" style="display:inline-block;">
            <tr class="box50_tr">
                <td class="box50_td"><img src="https://www.rakuten.ne.jp/gold/sappun/promotion/20201231/test_08.jpg"></td>
            </tr>
            <tr class="box50_tr">
                <td class="box50_td"><img src="https://www.rakuten.ne.jp/gold/sappun/promotion/20201231/test_09.jpg"></td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>

Categories

how to make contents fit to div box by using css?

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags