Leave image with responsive text

Question

Leave image with responsive text

Navigation

#1 by (2 votes)

1

Hello,

I need to insert a text on top of an image, which is responsive in the correct place of the image, until it is working "well", but the site is done in bootstrap, and when it leaves col-md-4 and goes to the size col-xs-12 (when you resize the window). From there the text gets too small.

What I want is for the text to fit the image, just as the image fits the window resizing.

Follow the jsfiddle example: link

The code I got from this site: link

Edited: David Samm helped me a lot.

JsFidlle Updated: link

It got a delay while switching, but acceptable. Maybe if I put 'else if' for all ['xs', 'sm', 'md', 'lg'] with values other than font-size soften the exchange.

I added this script to get the bootstrap3 breakpoint.

  <script src="https://rawgit.com/maciej-gurban/responsive-bootstrap-toolkit/master/dist/bootstrap-toolkit.min.js"></script>

AndIdidthisfunctiontochangethevalues.

<scripttype="text/javascript">
    (function($, document, window, viewport){
      function setTextSize() {
        if ((viewport.current() == 'xs') || (viewport.current() == 'sm')) {
          $("figure.overlay figcaption").css('font-size','7.0vw');
        } else {
          $("figure.overlay figcaption").css('font-size','2.4vw');
        }
      }

      // Executes once whole document has been loaded
      $(document).ready(function() {
        console.log('Current breakpoint:', viewport.current());
        setTextSize();
      });

      $(window).resize(
        viewport.changed(function(){
          console.log('Current breakpoint:', viewport.current());
          setTextSize();
        })
      );
    })(jQuery, document, window, ResponsiveBootstrapToolkit);

  </script>

jquery html5 imagem layout-responsivo bootstrap

asked by anonymous 23.08.2017 / 23:15

1 answer

Meter with percentage Refresh table field with information from another column

score 2 · Accepted Answer

I understand almost nothing about Bootstrap, but I know of a jQuery feature that will force the font size in question. Add the code below to your page:

<script>
$(window).on('load resize',function(){
    if($(window).width() < 992){
        $("figure.overlay figcaption").css('font-size','7.3vw');
    }else{
        $("figure.overlay figcaption").css('font-size','2.0vw');    
    }
});
</script>