This topic contains 4 replies, has 2 voices, and was last updated by Sean Sean 3 years, 5 months ago.

Image responsive in buttons.


  • lleflon
    Participant

    Posts: 28
    Member Reply #1217

    Hi,
    Is it possible to have responsive images in buttons or responsive buttons?
    I use this code but the images do not resize

    
    <pre>
    <!---------------------- Start Picture + Project Name ------------------------------>
    <div class="row margin-bottom--5 gallery-item3">
    <!-- BEGIN Image projet -->            
    <div class="col-md-12 col-sm-12 col-xs-12 gallery-item2">  
    <div class="booking-offer">
    <img src="projects/stargate/background/ban_sgn.jpg" class="img-responsive" alt="ban_sgn.jpg">
    <div class="booking-offer-in text-center">
    <span></span>
    </div>
    <!-- Carousel nav -->
    <a class="control-left tooltips" data-container="body" data-placement="top" data-original-title="Project KEYSIV" href="project_item_keysiv.php" data-slide="prev">
    <i class="m-icon-big-swapleft m-icon-white"></i>
    </a>
    <a class="control-right tooltips" data-container="body" data-placement="top" data-original-title="Project 2031" href="project_item_2031.php" data-slide="next">
    <i class="m-icon-big-swapright m-icon-white"></i>
    </a>
    <div class="booking-offer-in-logo">
    <span>
    <div class="btn-toolbar margin-bottom-10">
    <div class="btn-group col-md-12 col-sm-9 col-xs-7">
    
    <!---------------------- START image in button here------------------------------>
    <button type="button" class="tooltips btn-link btn-default-logo" data-container="body" data-placement="top" data-original-title="MAYA"><img src="custom/images/software/maya.png" title="maya" alt="maya.png" class="img-responsive "></button>
    <button type="button" class="tooltips btn-link btn-default-logo" data-container="body" data-placement="top" data-original-title="VRAY"><img src="custom/images/software/vray.png" title="vray" alt="vray.png" class="img-responsive "></button>
    <button type="button" class="tooltips btn-link btn-default-logo" data-container="body" data-placement="top" data-original-title="UVLAYOUT"><img src="custom/images/software/uvlayout.png" title="uvlayout" alt="uvlayout.png" class="img-responsive "></button>
    <button type="button" class="tooltips btn-link btn-default-logo" data-container="body" data-placement="top" data-original-title="PHOTOSHOP"><img src="custom/images/software/photoshop.png" title="photoshop" alt="photoshop.png" class="img-responsive "></button>
    <button type="button" class="tooltips btn-link btn-default-logo" data-container="body" data-placement="top" data-original-title="QUIXEL"><img src="custom/images/software/quixel.png" title="quixel" alt="quixel.png" class="img-responsive "></button>
    <button type="button" class="tooltips btn-link btn-default-logo" data-container="body" data-placement="top" data-original-title="XNORMAL"><img src="custom/images/software/xNormal.png" title="xNormal" alt="xNormal.png" class="img-responsive "></button>
    <button type="button" class="tooltips btn-link btn-default-logo" data-container="body" data-placement="top" data-original-title="ZBRUSH"><img src="custom/images/software/zbrush.png" title="zbrush" alt="zbrush.png" class="img-responsive "></button>
    <button type="button" class="tooltips btn-link btn-default-logo" data-container="body" data-placement="top" data-original-title="MUDBOX"><img src="custom/images/software/mudbox.png" title="mudbox" alt="mudbox.png" class="img-responsive "></button>
    <button type="button" class="tooltips btn-link btn-default-logo" data-container="body" data-placement="top" data-original-title="UE4"><img src="custom/images/software/ue4.png" title="ue4" alt="ue4.png" class="img-responsive "></button>
    <!---------------------- END image in button here------------------------------>
    
    </div>
    </div>
    </span>
    </div>
    </div> 
    </div>
    <!-- END Image projet -->             
                </div>
    <!---------------------- END Picture + Project Name ------------------------------>
    </pre>
    

    xxx.png pictures are always the same size.
    Regards

    • This topic was modified 3 years, 5 months ago by  lleflon.

    lleflon
    Participant

    Posts: 28
    Member Reply #1219

    Add example image

    Attachments:
    You must be logged in to view attached files.
    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #1223

    Hi :),

    Sorry, this type of buttons are not supported by Metronic. But you can implement it from scratch to extend the theme according to your needs. Good luck with your project!

    Thanks.


    lleflon
    Participant

    Posts: 28
    Member Reply #1224

    Thank you, it’s already in place.
    I want to improve the behavior of these images.
    I’ll get on the Net.
    Best Regards

    Sean
    Sean
    Keymaster

    Posts: 4527
    Support Staff Reply #1226

    Sure, good luck with your project! 🙂

You must be logged in to reply to this topic.