css - Truncate responsive image in Bootstrap media-body (Media object) in Firefox -


in firefox browser (ver. 37) responsive images (class="img-responsive") in media-body element (bootstrap, media object) truncate (cropped). example in chrome browser good, , image reduced.

sample code:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>    <div class="container">      <div class="media">          <div class="media-left">              media-left          </div>          <div class="media-body">              <img src="http://lorempixel.com/output/city-q-g-1920-300-10.jpg" class="img-responsive" />              media-body          </div>      </div>  </div>

preview firefox (problem!):

enter image description here


preview chrome (everything good):

enter image description here


i know bug responsive image in tables on firefox [https://bugzilla.mozilla.org/show_bug.cgi?id=975632] every solutions not work in media-body because width of element (bootstrap styles) set on 10000px!

is there trick solves issues?


Comments

Popular posts from this blog

php - failed to open stream: HTTP request failed! HTTP/1.0 400 Bad Request -

java - How to filter a backspace keyboard input -

java - Show Soft Keyboard when EditText Appears -