0

I need to get the following background image responsive using bootstrap.

<div class="col-md-6">
    <img src="images\4.jpg">
</div>

How could I get the image responsive?

Fruchtzwerg
  • 10,999
  • 12
  • 40
  • 49
Lion
  • 283
  • 3
  • 5
  • 17
  • 1
    Please recreate your code in a jsfiddle (https://jsfiddle.net/) and edit your question with the link attached. That will make it easier for people to help. – David De Sloovere Aug 03 '17 at 08:53
  • Possible duplicate of [Images not responsive by default in Twitter Bootstrap 3?](https://stackoverflow.com/questions/17932509/images-not-responsive-by-default-in-twitter-bootstrap-3) – creimers Aug 03 '17 at 08:56

3 Answers3

1

There is a responsive class for image in Bootstrap: 'img-fluid'. It will take up all the width of its container.

<div class="col-md-6">
 <img class="img-fluid" src="images\4.jpg">
</div>

Reference: Bootstrap-4 responsive image

Huy Le
  • 339
  • 1
  • 2
  • 11
  • Please explain more about your question. :) – Huy Le Aug 03 '17 at 09:10
  • I have ackground image in My
    bootstrap tag. now I need make responsive this image as well
     – Lion Aug 03 '17 at 09:14
  • Maybe this one will answer your question. [Image position](https://stackoverflow.com/questions/42240058/center-image-inside-a-div-like-setting-background-position) – Huy Le Aug 03 '17 at 11:11
0

You can use class="img-responsive" to make any image responsive

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="col-md-6">
 <img src="http://theworldly.co.uk/wp-content/uploads/2017/01/tech-wowcity.jpg" class="img-responsive">
 </div>
Rohit Verma
  • 3,657
  • 7
  • 37
  • 75
0

Here you go with responsive background-image solution https://jsfiddle.net/tekx21t9/1/

.bg {
  background-image: url("http://via.placeholder.com/350x15");
  height: 100px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  
  <div class="row">
    
    <div class="col-md-6 bg">
       <!--<img src="http://via.placeholder.com/350x150" class="img-responsive" />-->
     </div>
    
  </div>
  
</div>

If you want the image tag to be there rather than background-image then below is the solution

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  
  <div class="row">
    
    <div class="col-md-6">
       <img src="http://via.placeholder.com/350x150" class="img-responsive" />
     </div>
    
  </div>
  
</div>
Shiladitya
  • 12,003
  • 15
  • 25
  • 38