Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

2.1: distorted images in Chrome #4935

Closed
heldchen opened this issue Sep 3, 2012 · 12 comments
Closed

2.1: distorted images in Chrome #4935

heldchen opened this issue Sep 3, 2012 · 12 comments
Labels
css

Comments

@heldchen
Copy link

heldchen commented Sep 3, 2012

the image height bug previously fixed in 2.0.3 (issue #1899 and #2779) is back in 2.1.0
@ansman
Copy link
Contributor

ansman commented Sep 3, 2012

Confirmed, annoying as hell!

The culprit here seems to be 7b726f974f5e00c57b1087bb62d516943d9a58e3 and the awesome commit message doesn't give much insight to why it's needed.

@mdo mdo closed this as completed in acf2a64 Sep 4, 2012
@mdo
Copy link
Member

mdo commented Sep 4, 2012

This has to be done. Don't use the height attribute, but external or inline styles. I've clarified the comments for the responsive images, but for proper scaling everywhere, this is necessary.

@heldchen
Copy link
Author

heldchen commented Sep 4, 2012

this should go into responsive css then and not the main one. we're not using a responsive layout at all and thus expect the images to be shown with the proper static sizes.

there's no way to undo these css changes by overriding in css unless you patch them out of bootstrap.css which makes them extremely annoying in our case.

@ansman
Copy link
Contributor

ansman commented Sep 4, 2012

@markdotto Couldn't we have some sort of class to show that we want this?

Usually I could just override the style but since I cannot undo this (height and width on img).

@ansman
Copy link
Contributor

ansman commented Sep 4, 2012

Also, this breaks another really important aspect.

I want to scale missing images and keep the original aspect ratio.

svda pushed a commit to myxt/bootstrap that referenced this issue Oct 9, 2012
Merge branch 'master' of https://github.com/twitter/bootstrap
74ce6e9 
* 'master' of https://github.com/twitter/bootstrap: (102 commits)
  last rebuild before 2.1.1 release
  regrettably remove the animated button for download on homepage to improve page performance in some browsers
  fixes twbs#4968 manually: typo in scaffolding docs about offset classes
  improve comments in image styles
  fixes twbs#4958: add version to minified js
  fixes twbs#4885: correct use of skew in .skew() mixin for FF
  fixes twbs#4957: use input border var for select element instead of #ddd
  fixes twbs#4959: docs example
  fixes twbs#4935: properly comment responsive image techniques and add CSS tests to support
  fixes twbs#4146: IE7-8 responsive image helper
  add comment to go with updated box-shadow mixin
  fixes twbs#4909: add color utility classes .text-warning, etc and document them
  fixes twbs#4925: ensure docs examples don't use fixed font-size and line-height for .lead
  fixes twbs#4922: use basefontsize for realz on .lead
  fixes twbs#4902: proper accordion html example
  fixes twbs#4910: use @baseLineHeight * 1.5 for .lead font-size
  fixes twbs#4869: typo in getting started
  fixes twbs#4901: attribute typo and reran make
  fixes twbs#4896: reflect media query order in docs
  fixes twbs#4824: scope table grid sizes to .table instead of table
  ...
svda pushed a commit to myxt/bootstrap that referenced this issue Oct 9, 2012
Merge branch 'master' into ezp
d95226c 
* master: (102 commits)
  last rebuild before 2.1.1 release
  regrettably remove the animated button for download on homepage to improve page performance in some browsers
  fixes twbs#4968 manually: typo in scaffolding docs about offset classes
  improve comments in image styles
  fixes twbs#4958: add version to minified js
  fixes twbs#4885: correct use of skew in .skew() mixin for FF
  fixes twbs#4957: use input border var for select element instead of #ddd
  fixes twbs#4959: docs example
  fixes twbs#4935: properly comment responsive image techniques and add CSS tests to support
  fixes twbs#4146: IE7-8 responsive image helper
  add comment to go with updated box-shadow mixin
  fixes twbs#4909: add color utility classes .text-warning, etc and document them
  fixes twbs#4925: ensure docs examples don't use fixed font-size and line-height for .lead
  fixes twbs#4922: use basefontsize for realz on .lead
  fixes twbs#4902: proper accordion html example
  fixes twbs#4910: use @baseLineHeight * 1.5 for .lead font-size
  fixes twbs#4869: typo in getting started
  fixes twbs#4901: attribute typo and reran make
  fixes twbs#4896: reflect media query order in docs
  fixes twbs#4824: scope table grid sizes to .table instead of table
  ...
@HiroProt
Copy link

Took me many hours to figure out what was going on here when using isotope JS, as it relies on the browser image sizing to properly position elements. I think this CSS rule does more damage than good and should be removed.

@holic
Copy link
Contributor

holic commented Dec 31, 2012

👍

height: auto does some nasty stuff with broken images.

@aleemb
Copy link

aleemb commented Jan 16, 2013

I ran into the same issue. Even setting <img height=100 width=100 ... /> causes the height to be undetermined untilt he image loads and that causes the page to reflow in Google Chrome. IE8 and FF both work fine and reserve the image space.

The page reflow is kind of annoying especially if multiple images are waiting to load.

@iegik
Copy link

iegik commented Jan 18, 2013

This bug also repeats in 3.0.0

@LionLai
Copy link

LionLai commented Apr 1, 2013

this bug find in 2.3.1 in FF / IE / Chrome

@cvrebert
Copy link
Collaborator

Related: #4471

@cvrebert cvrebert mentioned this issue Apr 18, 2013
Closed
stempler pushed a commit to stempler/bootstrap that referenced this issue Apr 11, 2014
@mdo
(less) fixes twbs#4935: properly comment responsive image techniques …
b16910e 
…and add CSS tests to support
stempler pushed a commit to stempler/bootstrap that referenced this issue Nov 4, 2014
@mdo
(less) fixes twbs#4935: properly comment responsive image techniques …
ddc28cd 
…and add CSS tests to support
@eyepaxbuwaneka
Copy link

This issue is back with Chrome version 74

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
10 participants
@HiroProt @aleemb @mdo @ansman @iegik @heldchen @cvrebert @holic @LionLai @eyepaxbuwaneka