Используя сетки начальной загрузки, как я могу добавить адаптивное изображение и подогнать его под сетку? - PullRequest
Новая
       1

Используя сетки начальной загрузки, как я могу добавить адаптивное изображение и подогнать его под сетку?

0 голосов
/ 15 мая 2019

Мой код: 

<div class="row">
  <div class="col-md-9"> 
    <img src" link "> 
  </div>
  <div class="col-md-3">
    <form> </form>
  </div>

Ответы [ 5 ]

0 голосов
/ 15 мая 2019

img-Fluid - это ответ, который вы ищете. В качестве примечания, начиная с Bootstrap 4, нет никаких причин использовать «col-sm col-md col-lg col-xl» и т. Д., Просто используйте col- и он автоматически адаптируется к размеру экрана.

0 голосов
/ 15 мая 2019

Просто добавьте img-fluid класс в элемент img, я также обновлю ваш код, надеюсь, он вам поможет. Спасибо

Bootstrap Адаптивное изображение Документация - Ссылка 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="row">
  <div class="col-md-9"> 
    <img src="https://png.pngtree.com/thumb_back/fh260/back_pic/03/62/30/9157aa94e693d90.jpg" class="img-fluid"> 
  </div>
  <div class="col-md-3">
    <form> </form>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
0 голосов
/ 15 мая 2019

используйте этот класс, чтобы сделать изображение отзывчивым в bootstrap 4 class = "img-Fluid"

Если изображение очень маленькое по ширине, но вы хотите, чтобы оно соответствовало сетке, тогда укажите ширину изображения 100%, вы можете использовать этот класс "w-100" в BS4

0 голосов
/ 15 мая 2019

посмотри на мою скрипку и скажи мне, если ты поэтому и ищешь. 

<div class="container">
  <div class="row"> 
    <div class="col-6"> 
      <img src="http://cedricmarchal.eu/wp-content/uploads/2018/12/pexels-photo-414612.jpeg" class ="img-fluid"> 
    </div> 
    <div class="col-4"> 
     <form> 
      <div class="form-example">
      <label for="name">Enter your name: </label>
      <input type="text" name="name" id="name" required>
    </div>
    <div class="form-example">
      <label for="email">Enter your email: </label>
      <input type="email" name="email" id="email" required>
    </div>
    <div class="form-example">
      <input type="submit" value="Subscribe!">
    </div>
     </form> 
     </div>
 </div>

css: 

.container{
  margin-top: 5px;
}

https://jsfiddle.net/m0Lc37fy/

0 голосов
/ 15 мая 2019

Попробуйте это 

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="row">
    <div class="col-md-9">
      <img src="image.png" class="img-responsive" alt="text">
    </div>
    <div class="col-md-3">
      <form> </form>
    </div>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...