代码之家 › 专栏 › 技术社区 › ThanhLam112358

引导4中的响应图像

bootstrap-4 html5 css

0

ThanhLam112358 · 技术社区 · 8 年前

我在引导4.0中的响应映像有问题。我使用 class=“img fluid” 但是它似乎不起作用。

我在Chrome上使用附加组件来检查另一个设备(iPhone4),而这张图片不是用设备监视器缩放的。

这是我的代码:

文档类型HTML>
<html lang=“en”>
<头部>
<title>mn hnh danh sch i_n tho_i</title>
<!--必需的元标记-->
<meta charset=“utf-8”>
<meta name=“viewport”content=“width=device width,initial scale=1,shrink to fit=no”>
<link rel=“stylesheet”href=“https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css”integrity=“sha384-gn5384xqq1aowxa+058rxpg6fy4iwvtnh0e263xmfcjlsawiggfaw/dais6jxm”crossorigin=“anonymous”>
</head>
<正文>
<div class=“container fluid”>
<DIV class=“行边框主mt-1 ml-1 mr-1圆形”>
<img src=“img/pet.png”style=“width:8rem”class=“img fluid float left pb-2”>
<DIV class=“col-md-6文本中心文本危险”>
<h5 class=“FONT WEIGHT BOLD”>c_擩a h_ng_i_堍_i宠物</h5>
<h5>_a ch_:42 ph_m ng_c th_ch ph_ng 6 qu_n 3 tp.hcm</h5>
<h5>_i_n tho_:i:0907.888.511</h5>
</DIV>
<DIV class=“col-md-6”>
</DIV>
</DIV>
</DIV>
<!--首先是jquery,然后是popper.js,然后是bootstrap js-->
<script src=“https://code.jquery.com/jquery-3.2.1.slim.min.js”integrity=“sha384-kj3o2dktikvyik3uenzmm7kkrr/re9/qpg6aazgjwfdmvna/gpgf93hxpg5kkn”crossorigin=“anonymous”></script>
<script src=“https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js”integrity=“sha384-apnbgh9b+y1qktv3rn7w3mgpxhu9k/scqsap7huibx39j7fakffpskvxusvfa0b4q”crossorigin=“anonymous”></script>
<script src=“https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js”integrity=“sha384-jzr6spejh4u02d8jot6vlehfe/jqgirrsqxsfwpi1mquvdayjuar5+76pvcmyl”crossorigin=“anonymous”></script>
</body>
</html>>=



我希望这张照片是这样的:

.



这是我的代码:



<!doctype html>
    <html lang="en">
    <head>
    <title>MÃ n hÃ¬nh danh sÃ¡ch Äiá»n thoáº¡i</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    </head>
    <body>
    <div class="container-fluid">
        <div class="row border border-primary mt-1 ml-1 mr-1 rounded">
            <img src="img/PET.png" style="width: 8rem" class="img-fluid float-left pb-2">
            <div class="col-md-6 text-center text-danger">
                 <h5 class="font-weight-bold">Cá»¬A HÃNG ÄIá»N THOáº I PET</h5>
                 <h5>Äá»a chá»: 42 Pháº¡m Ngá»c Tháº¡ch PhÆ°á»ng 6 Quáºn 3 TP.HCM</h5>
                 <h5>Äiá»n thoáº¡i: 0907.888.511</h5>
            </div>
            <div class="col-md-6">      
            </div>
        </div>
    </div>
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>




我希望这个图像是这样的:

3 回复 | 直到 7 年前

1

0

samaspin 7 年前

<div class="container">
    <div class="row">
        <div class="col">
            <img class="img-fluid" src="my-image.jpg" />
        </div>
    </div>
</div>

2

0

××× × ×××× 8 年前

img div class="img-fluid float-left pb-2"

col-6

https://jsfiddle.net/3f5ke0c2/

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container-fluid">
    <div class="row border border-primary mt-1 ml-1 mr-1 rounded">
    <div class="img-fluid float-left pb-2">
        <img src="https://material.angular.io/assets/img/examples/shiba1.jpg"
        style="width: 8rem">
    </div>
        <div class="col-6 text-center text-danger">
             <h5 class="font-weight-bold">Cá»¬A HÃNG ÄIá»N THOáº I PET</h5>
             <h5>Äá»a chá»: 42 Pháº¡m Ngá»c Tháº¡ch PhÆ°á»ng 6 Quáºn 3 TP.HCM</h5>
             <h5>Äiá»n thoáº¡i: 0907.888.511</h5>
        </div>
        <div class="col-md-6">      
        </div>
    </div>
</div>

3

0

nourza 8 年前

.img-fluid {
    max-width: 100%;
    height: auto;
}