CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Goldensquare
Goldensquare

Reputation: 331

border and image responsive simultaneously

So I have a picture inside a div box. There is .img-responsive for images but what if I want to make the border responsive as well , so that when I shrink the size of the screen , the border and the image shrinks proportionately together. Also the text inside the box should also shrink responsively. If there is a bootstrap way to do it. Please tell me that also.

div id="quote_box">
    <p id="quote">
        This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
    </p>
</div>

And the css is: 

#quote_box{
background-image: url('parchment.jpg');
border: solid black;
border-radius:5px;
height:400px;
width:300px;
background-size:cover;
background-repeat: no-repeat;
box-shadow:20px 20px 10px;
display: block;

}

#quote {
margin:10%;
text-align:center;
font-size: 22px;
font-weight: bold;
font-family:Georgia;
color: black;

}

Upvotes: 0

Views: 1724

Answers (1)

LKG
LKG

Reputation: 4192

Just remove height and width from quote_box if you want to assign width and height then use max-width and max-height like following.

#quote_box{
   max-width:300px;
   max-height:400px;
}

Without using bootstrap working snippet

#quote_box {
  background-image: url('http://lorempixel.com/400/200/sports/1');
  border: solid black;
  border-radius: 5px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  /* Add this  and remove height and width */
  box-shadow: 20px 20px 10px;
  display: block;
}

#quote {
  margin: 10%;
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  font-family: Georgia;
  color: black;
}
<div id="quote_box">
  <p id="quote">
    This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
  </p>
</div>

With Bootstrap you have to use some bootstrap classes like following fiddle

fiddle link with bootstrap

Upvotes: 1

Related Questions