css - Overlaping many imgs in html -

-

i have 7 transparent images same width , same height. have background image same width , height well. did (and want do) place background image in main div , place other 7 imgs on top see in code below. result imgs flow out of main div , bigger. tried changing css similar behaviour alway occurs. in addition, background image not in center of page specified in css. can mistake?

so got following html:

 <div class="row wrapper">       <div class="col container"><img ng-src="{{data.firstdisplay.src}}"></div>       <div class="col container"><img ng-src="{{data.seconddisplay.src}}"></div>       <div class="col container"><img ng-src="{{data.thirddisplay.src}}"></div>       <div class="col container"><img ng-src="{{data.forthdisplay.src}}"></div>       <div class="col container"><img ng-src="{{data.fifthdisplay.src}}"></div>       <div class="col container"><img ng-src="{{data.sixthdisplay.src}}"></div>       <div class="col container"><img ng-src="{{data.seventhdisplay.src}}"></div>     </div>

and following css:

img { display: inline-block; margin-left: auto; margin-right: auto; padding:0; max-width: 100%;}  .container { width: 100%; height: 100%; position: absolute; top: 0; left: 0;}  .wrapper {     padding-right:20%;     padding-left:20%;     width: 300px;     height: 127px;     background: url(img/tbackg.png)  no-repeat center;     background-size: contain;     position: relative;

the output looks (note not images appear here point shown, background small image while big ones individual images): enter image description here

element margin: auto need width, in case, drop margin , set text-align: center; on parent .container instead

if img images height not same height set on wrapper, you'll need add height: 100%, or else not match backgrond image's height

img {    display: inline-block;    height: 100%;            /*  needed if image higher/lower                                 127px set on wrapper  */  }  .container {    width: 100%;    height: 100%;    position: absolute;    top: 0;    left: 0;    text-align: center;  }  .wrapper {    padding-right: 20%;    padding-left: 20%;    width: 300px;    height: 127px;    background: yellow url(http://placehold.it/127) no-repeat center;    background-size: contain;    position: relative;  }
<div class="row wrapper">    <div class="col container">      <img src="http://placehold.it/227/f00">    </div>    <div class="col container">      <img src="http://placehold.it/227/0f0">    </div>    <div class="col container">      <img src="http://placehold.it/227/00f">    </div>  </div>

as suggestion drop img in favor of using background image on container. doing so, image adjust equally how background-size: contain works

.container {    width: 100%;    height: 100%;    position: absolute;    top: 0;    left: 0;    background-repeat: no-repeat;    background-position: center;    background-size: contain;    }  .wrapper {    padding-right: 20%;    padding-left: 20%;    width: 300px;    height: 127px;    background: yellow url(http://placehold.it/127) no-repeat center;    background-size: contain;    position: relative;  }
<div class="row wrapper">    <div class="col container"         style="background-image: url(http://placehold.it/127/f00)">    </div>    <div class="col container"         style="background-image: url(http://placehold.it/127/0f0)">    </div>    <div class="col container"         style="background-image: url(http://placehold.it/127/00f)">    </div>  </div>


Comments

Post a Comment

Popular posts from this blog

jsf - "PropertyNotWritableException: Illegal Syntax for Set Operation" error when setting value in bean -

-
this question has answer here: how send form input values , invoke method in jsf bean 1 answer i error when trying send values jsf page bean. i want set values fields in bean, create airplane instance , add database. error telling me use illegal syntax setter part of bean. why error? didnt find on site helped me problem. here jsf part: <h4>add plane</h4> <c:if test="#{not empty listairplanebb.error}"> <div class="alert alert-danger"> <span class="glyphicon glyphicon-remove"></span> <h:outputtext value="#{listairplanebb.error}" /> </div> </c:if> <h:form> <table class="table"> <thead> ...
Read more

arrays - Algorithm to find ideal starting spot in a circle -

-
so problem have been debating such: your given array of integers representing circle. then, have pick spot in circle start. place start, compare value @ array number of steps took there , if steps less or equal number, include in final set. find place start have elements in set. ex, a=[0, 1, 2] if start @ index=0, then: a[0]=0 < =0 0 included a[1]=1 < =1 1 included a[2]=2 < =2 2 included final set: {0,1,2} if start @ index=1, then: a[1]=1 > 0 1 not included a[2]=2 > 1 2 not included here loop around a[0]=0 > 2 0 included final set: {0} if start @ index=2, then: a[2]=2 > 0 2 not included, here loop around a[0]=0 < = 1 0 included a[1]=1 < = 2 1 included final set: {0,1} so in trivial case, starting position index=0 best position results in final set elements. brute force method of finding obvious, trying find more efficient method. attempts far have been examine trying find max intersect of viable starting ranges calculated each element in arr...
Read more

php - Autoloader issue not returning Class -

-
problem? bootloader (autoloader) not seem working properly, or i'm missing something. here simplified code. the code below returns class "skeleton" not exist. on index.php file. index.php <?php include 'bootloader.php'; use skeleton\html\loginheader; $tool = new skeleton/html/loginheader(); bootloader.php <?php function boot($classname) { $filename = ''; $namespace = ''; // sets include path "src" directory $includepath = dirname(__file__).directory_separator.'src'; if (false !== ($lastnspos = strripos($classname, '\\'))) { $namespace = substr($classname, 0, $lastnspos); $classname = substr($classname, $lastnspos + 1); $filename = str_replace('\\', directory_separator, $namespace) . directory_separator; } $filename .= str_replace('_', directory_separator, $classname) . '.php'...
Read more