css3 - Images stretching in Flexbox on Firefox -


css3 flexbox working fine on safari , chrome, on firefox images stretched. how can fixed this?

here example of code: 

body{    padding: 30px;  }  .img-wrapper{    display: -webkit-flex;    display: flex;    display:-moz-box    -webkit-align-items: center;    align-items: center;    -webkit-justify-content: center;    justify-content: center;    height: 350px;    background-color: #eee;  }
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>    <div class="row">    <div class="col-xs-4">      <div class="img-wrapper">        <img class="img-responsive" src="https://www.googledrive.com/host/0b_o3i6x00l9pufrrlwutm0wzug8" alt="">      </div>    </div>    <div class="col-xs-4">      <div class="img-wrapper">        <img class="img-responsive" src="https://www.googledrive.com/host/0b_o3i6x00l9pmjjqsnd6uvu4oxc" alt="">      </div>    </div>    <div class="col-xs-4">      <div class="img-wrapper">        <img class="img-responsive" src="https://www.googledrive.com/host/0b_o3i6x00l9pzjfiuy03uw9fogm" alt="">      </div>    </div>  </div>

maybe working fine remove display:-moz-box not close it. no need use it. replace css code. work. https://jsfiddle.net/hamzanisar/w6na28km/

body{       padding: 30px;     }       .img-wrapper{   display:-webkit-flex;   display:flex;   -webkit-align-items: center;   align-items: center;   -webkit-justify-content: center;   justify-content: center;   height: 350px;   background-color: #eee;   position:relative; } .img-wrapper img{    bottom: 0; height: auto; left: 0; margin: auto; max-height: 100%; max-width: 100%; position: absolute; right: 0; top: 0; width: auto;}

Comments

Post a Comment

Popular posts from this blog

php - Wordpress website dashboard page or post editor content is not showing but front end data is showing properly -

Image
recently have uploaded wordpress site onto server. have uploaded wordpress site in sub-folder under root folder ../root(domain root folder)/wordpress (where host wordpress folder). now problem content data in page or post in dashboard of wordpress admin panel not showing - see image. but data showing in front view - see image. if not browser cache issue , not issue happened tinymce editor during upgrade; try add config file: define('concatenate_scripts', false);
Read more

How to get the ip address of VM and use it to configure SSH connection dynamically in Ansible -

i trying ip address of vm , trying use establish ssh vm. following script: --- - hosts: localhost become: yes connection: local gather_facts: false serial: 1 vars_files: - createvmvars.yml tasks: - name: gathering vm info. vsphere_guest: vcenter_hostname: "{{vcenter_hostname}}" username: "{{vcenter_username}}" password: "{{vcenter_password}}" guest: "{{guest_name}}" vmware_guest_facts: yes register: var - debug: msg="{{var.ansible_facts.hw_eth0.ipaddresses[0]}}" - name: establishing ssh connection. script: /home/shasha/devops/scripts/ssh_configure.sh "{{var.ansible_facts.hw_eth0.ipaddresses[0]}}" following content of ssh_configure.sh : #!/bin/sh ssh-keygen -t rsa ssh-copy-id $1 but when running playbook, getting following error while executing third task: error! 'var' undefined but debug module(second task) printin
Read more

javascript - Get parameter of GET request -

i make request: createxhrrequest( "get", fileurl, function( err, response ) { if( err ) { alert( "error get!" ); } alert(response); }); and full response: { "status" : "ok", "message" : "jvberi0xljqkjdduxdgkmy how can jvberi0xlj ? i try response.message , response["message"]. nothing works. just simple access this: var json = json.parse(response); json.message
Read more