简体   繁体   中英

Height in CSS with Auto/Calc

I'm having a problem on my new website. But first I should give you some information.

I'm building a full responsive website with a portfolio. My portfolio images stands in a DIV and response to the screen size. On a screen with more then 1005px it's working perfect. Also the scaling works great. This is because the following CSS line:

@media only screen and (max-width: 1005px) {

The div with my image is newtextportfolio. The image itself doesn't use CSS except 100% width and height. When i give my div the follow definition (height: auto;) i get a white line under my images. And i don't want the white line :(

.newtextportfolio {
    width: calc(95% + 10px);
    height: auto; 
    margin-right: 25px;
}

I can make it disappear if I make the height for example 200px. But when I view my site on an iPad this makes the images stretch (because it's fixed and not responsive).

Does anyone know how i can make the white line disappear? I already tried some things with calc, percentages but this also makes the line, only fixed pixels doesn't.

 .newcontainersmallleftprices { width: 310px; float: left; margin-left: 14px; } .newtop1 { width: 310px; background-image: url("../images/tops/portfolio1.png"); text-align: center; font-size: 23px; color: #FFFFFF; height: 50px; -moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px#888; box-shadow: 0 0 5px #888; margin: auto; padding-top: 20px; float: left; position: relative; z-index: 2; } .newtextportfolio { width: 310px; height: 200px; text-align: center; -moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px #888; box-shadow: 0 0 5px #888; margin: auto; background-color: #FFFFFF; float: left; position: relative; z-index: 1; font-size: 17px; } @media only screen and (max-width: 1005px) { .newcontainerpricesmall { width: 100%; } .newcontainersmallleftprices { width: 95%; margin-bottom: 25px; margin-left: 4%; } .newtextportfolio { width: calc(95% + 10px); height: auto; margin-right: 25px; } .newtop1 { width: 95%; padding-top: 20px; padding-left: 5px; padding-right: 5px; margin-right: 25px; } } 
 <div class="newcontainer"> <div class="newcontainerpricesmall"> <div class="newcontainersmallleftprices"> <div class="newtop1">Broeckerhave</div> <div class="newtextportfolio"> <a href="http://beta.gjwd.nl/images/portfolio/broeckerhave.png" data-lightbox="image-100" title="" class="portfolioimg"><img src="http://beta.gjwd.nl/images/portfolio/thumb/broeckerhave.png" width="100%" height="100%" /> </div> </div> 

Make the img element display:block .

https://jsfiddle.net/jmarikle/95gsk2tu/

An alternative approach is to give the image vertical-align: top; . This is being caused by the fact that images are inline elements with some block attributes. They retain line height, letter spacing, etc. Block level elements do not have those added calculations to their size, and aligning vertically collapses the attributes that cause the gap at the bottom.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM