I'm using the FB like box widget on my website. I noticed that bigger images published on FB are appearing distorted in the box.
I'm seeing that the css responsible for this is:
.uiScaledImageContainer img {
height: 100%;
min-height: 100%;
}
Is there a way I can force height: auto in my css?
Apparently anything I declare for this element in my sytlesheet is ignored, even using !important.
You can't edit the CSS in Facebook's iFrame.
I'm having the same issue but there is another bit of code that is overiding the "height:100%" with "height: auto" and i'm getting the same outcome. If I change the min-height to "auto" it seems to fix it.
The original code is:
.fan_box .uiStreamStory .uiStreamAttachments .photoRedesignAspect .img, .fan_box .uiStreamStory .uiStreamAttachments .photoRedesignCover .img, .fan_box .photoRedesign .img, .uiStreamStory .videoRedesign .uiVideoThumb img {
height: auto;
left: 0 !important;
width: 100%;
And
.uiScaledImageContainer img {
height: 100%; <!-- this is being overwritten -->
min-height: 100%;
position: relative;
Now we just need someone to update facebook's likebox.php.
Surprisingly, IE is the only browser that this isn't a problem. And for some reason firefox doesn't load the app altogether...
since nothing has changed until now here are some more details I found out to this problem:
It only appears to me on images that are in an album, not single
images that were uploaded in a post.
It appears to me in chrome browser and on iphone and android devices, not on firefox and
internet explorer.
Maybe that helps.
Related
My problem is that images on my page (iutm.pl) are displaying properly for instance in Firefox (then I assume there is nothing wrong with my code), but on WebKit or Blink browsers (such as Chrome or Opera) they doesn't.
Maybe it is Paperclip fault which I use to store images (there is need to keep relation between database and images) cause images stored explicitly in assets display properly.
Anyway, i have no idea why everything works in Gecko, but not with other engines.
Thanks in advance.
Bootstrap overrides width and height of your images. The simplest solution is to add width and height attributes to existing styles where you define border for images. This code does the trick.
.event_frame .frame-top .frame-img img {
width: 200px;
height: 200px;
border: solid;
border-color: #b2b2b2;
border-width: 1px;
}
I've set an image to max-height:100%; of the browser window (with a small padding at the bottom), centred on the page. Currently, I'm having problems keeping the aspect ratio of the image from squashing when the browser is resized (interestingly it shows at the correct aspect ratio when refreshed after a resize).
I've set up an example in codepen. Would appreciate any advice on how to keep the ratio correct.
http://cdpn.io/sHJhl
UPDATE 18/08: I've updated the code in the copepen above. It's now working in all browsers except Chrome, which distorts the image when the browser is resized. Oddly it resizes fine in Chrome when the codepen is in edit mode. I've tested the code from the codepen in my development site and it shows the same issue, so it's definitely not a codepen quirk. Hoping someone can help on this one.
FURTHER UPDATE 18/08: Solved this issue with Chrome by adding max-width:100%, see answer below.
Solved this issue. The image needed max-width:100%; as well as max-height:100%; width:auto; to work in Chrome. I've updated the codepen to show the full working code: http://cdpn.io/sHJhl
Image's parent element .photo-bkg doesn't have any width set, so add it a width: 100%;
.photo-bkg { height:100%; width: 100%; }
That should do the trick.
You want to achieve a full page background right?
This worked for me:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
source: http://css-tricks.com/perfect-full-page-background-image/
I am using this animated banner in my website.
Now I've copied the exact code from the tutorial but for some reason in my version the images seemed to be placed at the bottom of the table and cut off instead of as in the example. I've tried a number of possible solutions but either I've done them in the wrong place or they just don't work.
Normally I would add in the code but in this case (as you'll see from view page source) it's too long to post.
Any help will be appreciated
Well, I just opened Chrome Inspector changed few css properties and it worked. Here they are...
.photobanner
{
height: 232px;
width: 984px;
}
#container2
{
width: 748px;
overflow: hidden;
margin: 50px auto;
background: white;
}
I guess this would work.Tested in chrome..try your self with other browser and you should reduce margin of <h1> tag
i have a bug i'm trying to narrow down and it's proving to be a doozie. i'm making a modal overlay and in IE8 for some reason i am able to click "through", focus inputs and select text underneath it.
in IE9, FF, Chrome everything works as expected. unfortunately a reduced testcase i slapped together (shown below) works just fine in IE8. has anyone run into this bug before? hoping to save some time. thanks!
<!DOCTYPE html>
<html>
<head>
<style>
div {
background: pink;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: 0.5;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
</style>
</head>
<body>
<input type="text" />
<div></div>
</body>
</html>
The problem is indeed that IE allows clicks to bleed through when the background of a div is transparent. For me, this works everywhere:
Just use a base64 encode of a 1x1 pixel transparent GIF as background, this stops all the clicks / taps (also tested on IE9 and IE8). Plus, this is pure CSS, no extra images needed.
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
The root cause of this issue is that IE does not consider semi-opaque backgrounds to be valid click targets, and so clicks are passed through to the element underneath.
For IE, you must have a solid color background or a background image to have an element capture clicks. As you've discovered, filters will not work.
The common thing to do is to use a 1x1 transparent GIF as the background-image for IE. The element will then capture clicks appropriately.
figured it out, i was using rgba() rather than opacity because i needed only the background to have transparency.
for IE it generated gradient filter using -ms-filter which was causing the issue. ended up just using
background: url(/images/EBEBEBB3.png);
background: rgba(255,255,255,.7);
I am working on a project showing client testimonials as markers on a google map.
Using server side clustering in SQL and returning a json of field for clusters or markers, which is all working nicely. Some of the testimonials contain richer content, such as image url or video url.
I am using a .JS file marker with labels to show a text banner under each marker showing the rating e.g. 5 out of 5, but where a customer has supplied us with an image, i need to display the image. The marker with label code uses CSS styles to set text or image. I am checking in my Jquery code for a photourl, and if one exists, supplying the right paramters to the marker, however, as the customers have provided these images, they are all of varying dimensions and resoution. The current code seems to sho the photo's actual size hanging off the marker, i tried adding max-width: 60px; max-height: 60px; width: auto; height: auto; but it had no effect. is there any way i can use CSS or jquery to reduce the display size of these images, whislt maintaining aspect ratio?
I have a feeling i am going to have to go through the existing stock, create amended files and update the database to point each record to its new path, which i would rather avoid if i can code around it instead. Once this project is working there will be a big push to get more customer data and i can influence the file saving of future images.
Essentially, I want some code to show an image as thumbnail with max dimensions of about the size of a normal icon on a windows desktop.
Incorrectly using {} not "...". Once, I changed it to:
style =
"max-width: 120px;
max-height: 120px;
width: auto;
height: auto;
"
not style =
{
max-width: 120px;
max-height: 120px;
width: auto;
height: auto;
}
It works as I wanted it to.