Responsive image, does not redeem correctly

Asked

Viewed 149 times

1

I’m developing a website, and an image is not resizing as I expected, I have the image: 

<div class="cover">
    <div class="cover-image" style="background-image : url('http://4.bp.blogspot.com/-AycDlsjqzZg/TwNAOJgtvWI/AAAAAAAAAsU/7J9HDoXhHLs/s1600/bouken-ni+logo+01.png')"></div>
</div>

and I have my CSS class to resize:

.cover {
 padding: 30px 15px;
 margin-bottom: 30px;
 color: inherit;
 background-color: #eeeeee;
 margin-bottom: 0px !important;
 padding: 0px 0px;
 background-color: transparent;
 display: -webkit-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
-webkit-align-items: center;
 align-items: center;
 overflow: hidden;
 position: relative;
 height: 70%;
}
.cover .cover-image {    
z-index: -1;
position: absolute;
top: 0px;
width: 100%;
min-height: 30%;
height: 100%;
background-size: cover;
background-position: center;

}
css twitter-bootstrap bootstrap-3

  • resize as ? how do you want it to look ?

  • https://jsfiddle.net/ddLaqyvq/

  • The resize control is done in CSS. But you have to analyze if the image size is good. Its width is 100% you can increase its height too. But it’s still a little hard to understand...

  • @Next log I plan to put any image. This way I want to let it resize automatically

1 answer

1

It is the following André the property (background-size) when you pass some unit of measure in % for example it does the resizing keeping the Aspect ratio (ratio) of the image based on the width and height of the parent box. Now if you use the keyword (contain/cover) it resize proportional but working differently. Contain: Larger size occupies the entire length of the box; Cover: Smaller size occupies the entire length of the box.

Now you choose the best friendly layout.

Browser other questions tagged css twitter-bootstrap bootstrap-3

You are not signed in. Login or sign up in order to post.