/* Responsive images (ensure images don't scale beyond their parents) /
max-width: 100%; / Part 1: Set a maxium relative to the parent /
/ NEXT TWO LINES CAUSE PROBLEMS /
width: auto\9; / IE7-8 need help adjusting responsive images /
height: auto; / Part 2: Scale the height according to the width, otherwise you get stretching */
Is there any CSS that can be applied to override this default for img objects? I tried setting the width and height for the images in the css, but that had no effect.
Unfortunately, we won't be removing those at this time. They are necessary for the responsive image feature to work, and a few frameworks I know implement them this way. If there is a better way to do them, we can discuss that, but as it stands now, there is no way to override them aside from explicit dimensions via CSS (not HTML attributes).
Would there be any way in the less framework to make this conditional? I hate monkey patching a library.
Only option would be to override it in your own CSS (e.g., something like width: initial; or what have you). I haven't researched it much more lately, but if you wanted to dive into some responsive images CSS foo, we'd all appreciate it. Right now those lines are (sadly) required, and I know they can trip some things up.
Inlining this in the CSS worked, like this:
img src="blah-blah" width=398 height=265 style="width:398px; height:265px"
In fact, I also tested Isotope without using the width and height attributes, like this:
img src="blah-blah" style="width:398px; height:265px"
And that worked fine! Any recommendation if it's better to only specify the CSS?
I was able to very easily test this without bootstrap (or bootstrap 2.0) by using this CSS:
It seems that the width and height in the CSS do override the image properties, and before the images get loaded, the browser does not know how much space to allocate, and then, even after the images load, the spacing is still wrong, at least with Isotope. Inlining the style does workaround the issue. I think I tried using regular styles, but that didn't seem to work, but I may have had a CSS priority issue. Any way, since the image size is laid out with the image properties, it's rather natural to put in this tiny bit of inline CSS. I hope we eventually find a better solution, as this will surely affect others when upgrading.
Or at least this should be documented that one needs to use the inline style for the width and height of the image rather than the properties.
Yeah, the inline CSS will work where the width and height attributes fail. For now, go with that.
Boo inline css - any better solution for this yet?
I'll try to fix this in v3. Not sure of the best practice though for everyone to implement with minimal overhead.
thanks, working on templates for multiple customers/users so telling them they have to inline style image width/height or throw a class on each image to make it fixed width/height isn't super appealing.