Align image according to the container using CSS

Navigation
2

I have a banner record that will have fixed sizes, so I want to add a qrcode that will be generated by the system in this image, along with the user's photo. I have this situation: 

#carimbo-foto{
   position:absolute;
   z-index:0
}


#banner{
    position: relative;
    left: 0%;
    top:  0%;
}

#carimbo {
    position: absolute;
    left: 50%;
    top: 38%;
    margin-left:-64px;
    margin-top:-73px;  
    z-index:1
}

#qrcode{
    position: absolute;
    left: 51%;
    top: 78%;
    margin-left:-64px;
    margin-top:-73px;  
    z-index:1
}

Html: 

<div class="carimbo-foto">

<img src="/Content/imagens/user8-128x128.jpg" class="img-responsive" id="carimbo" alt="" width="90" height="98">
<img src="/Content/imagembanner/banner_novo.png" class="img-responsive" id="banner" alt="" width="560" height="315">
<img src="/Content/qrcode/1.png" class="img-responsive" id="qrcode" alt="" width="80" height="80">

</div>

Current result:

    
asked by anonymous 04.11.2016 / 03:22

1 answer

1

Good if you are putting #qrcode and #carimbo in position:absolute , then it will not respect .carimbo-foto , another that stamp-photo is classe and is declaring itself as identifier in css . 

.carimbo-foto{
position:relative;
height: 315px;
width:560px;
}
#carimbo{
position:absolute;
right: 11px;
top: -15px;
}
#qrcode{
position:absolute;
right: 11px;
bottom: -15px;
}	
<div class="carimbo-foto">

<img src="http://img.vmessages.com/en/funny/35.jpg"class="img-responsive" id="carimbo" alt="" width="90" height="98">
<img src="https://thumbs.dreamstime.com/t/bandeira-horizontal-de-cloudscape-43923748.jpg"class="img-responsive" id="banner" alt="" width="560" height="315">
<img src="http://cdnqrcgde.s3-eu-west-1.amazonaws.com/wp-content/uploads/2013/11/jpeg.jpg"class="img-responsive" id="qrcode" alt="" width="80" height="80">

</div>

In my view an easier way was to define the banner image as background of the photo stamp div, but if the image is not static it complicates a little ...

See if this example helps ...

    
04.11.2016 / 04:48
Graphic ggplot x axis Optimizing default middleware behavior