I'm seeing different height and width for an image between WebKit and Gecko/Trident, and am not able to narrow down what is causing the difference, and what should be the workaround.
The page in question is at: http://bloom-site.com/2013/02/15/tesser-well-madeleine-lengle/
The image in question is the big image which occupies the main post.
Could you help, or point me to how I can figure out the CSS properties causing the difference?
Thanks,
Amit
This should do the trick:
img {
width: auto;
height: auto;
max-width: 100%;
}
Works on my side. :)
Related
I have a Wordpress blog where my featured images & videos extend outside of the post, but I've run into a problem.
Whenever I'm embedding videos outside of YouTube, the embedding messes up completely. And I'm not sure why.
I have two examples here, please check the link: https://imgur.com/a/4wnjY
The css line that controls the width is .fluid-width-video-wrapper, and the code is:
width: 113% !important;
height: 51px;
margin-left: -6.4%;
Live demo here:
Correct article: https://www.droppet.se/visuellt/en-man-uppfostrar-en-ekorre/
Incorrect article: https://www.droppet.se/sport/cavani-och-mbappe-kombinerade-till-ett-drommal/ (password wvideo)
Change the width: 113% to 100% and get rid of margin-left
.fluid-width-video-wrapper {
width: 100%;
height: 51px;
/* margin-left: -6.4%; */
margin-bottom: 7px;
}
Your container is the desired size.
The problem is inside the iframe; the div .media-container has these CSS rules, which prevent the video from being the full width of the framed document:
height: 56.23vw;
max-width: 177.85vh;
Removing the max-width rule from that class corrects the problem.
But since you're framing a third-party site, you won't be able to remove that class; instead you'd need to tweak the height of the iframe so that the framed site's rules match your layout. Changing your .fluid-width-video-wrapper height to any height larger than 85px seems to do it. (May not be the ideal way to fix this, though; I haven't looked closely enough at the rest of your code to understand why that height rule exists.)
This is my friends website that I am helping her with redlady.al, I am using http://thevoux.fuelthemes.net/ theme,
My problem is the top post carousel, images display in different sizes and they should display like in the theme demo.
I have contacted the theme developer and it seems he doesnt have an answer for it. Can anyone help?
Solution 1 (CSS)
Set .slick.slick-initialized .post to fixed height, I'm using 280px here:
Downsides: if there's more text 300px might not be enough.
Solution 2 (Photshop/Gimp)
Simply crop the images in Photoshop before uploading them so their height is always the same.
Downside: you have to do that for every image.
Solution 3 (CSS)
Set .slick-slide img height to so it equals the height of the tallest image in your slider.
Downside: as these are images and you can't use background-size proportions might get weird in some cases. You need to use images with the same proportions to avoid that.
I'd personally go with 1 or 2.
.slick.slick-initialized .post{
visibility: visible;
height: 369px;
}
.slick-slide img {
display: inline-block;
width: auto;
height: 100%;
min-width: 100%;
max-width: none;
}
Setting height to exactly the size of Voux page + some quick image tweaks fixed the issue for me. Keep in mind this will stretch images that are not wide enough.
This will get you starting, I came up with this in like 30sec, if you want perfect solution you should hire some one.
No matter what screen size I use, the Sidenav is always the same size. I tried adding attributes such as
- flex
- flex="85" (to get 85% of its container)
Can't seem to find a good approach.
In angular material, md-sidenav has these attributes:
width: 304px;
min-width: 304px;
That's why the width will be fixed at 304 px no matter what device you use.
So if you want to change your sidenav width you'll have to change the css a bit.
If you're fine with supporting only modern browsers, you can change it to a vw measure (1/100th of the viewport width) and add it to a separate css file. The code will look something like this:
md-sidenav,
md-sidenav.md-locked-open,
md-sidenav.md-closed.md-locked-open-add-active {
min-width: 200px !important;
width: 85vw !important;
max-width: 400px !important;
}
Here's a plunker: http://plnkr.co/edit/cXfJzxsAFXA3Lh4TiWUk?p=preview
The answer submitted by user3587412 allowed me to change the width but I was having the same problem as Craig Shearer with it killing the animation. So I tried a few different things and came up with this.
md-sidenav.md-locked-open {
width: 250px;
min-width: 250px;
max-width: 250px;
}
I'm not sure if that is the proper way but it seemed to work for me.
Thanks to user3587412 I could find easily the required styles.
To get the md-sidenav to adjust to a flex parent just override
md-sidenav,
md-sidenav.md-locked-open,
md-sidenav.md-closed.md-locked-open-add-active {
min-width: 0px !important;
width: auto !important;
max-width: none !important;
}
After trying different CSS in this thread I end up with :
md-sidenav,
md-sidenav.md-locked-open-add-active,
md-sidenav.md-closed.md-locked-open-add-active,
md-sidenav.md-locked-open {
width: 200px;
min-width: 200px;
max-width: 200px;
}
I'm currently on angular-material 1.0.8 and tested with Chrome 50 only.
With this CSS what works for me :
Animation close and open OK
When locked OK
When not locked OK
In case anyone comes here using the latest mat-sidenav, you can explicitly set the width on the the element.
mat-sidenav {
width: 200px;
}
The docs caution against using percentage based sizes.
https://material.angular.io/components/sidenav/overview#setting-the-sidenavs-size
Here's a somewhat "jank" solution, but it doesn't mess with the animations at all. The sidenav automatically resizes itself in order of the items inside it to fit perfectly. As such, you can just add a span with the width of your choice to the mat-drawer to set a minimum size. Note that this only works to set a minimum width, and not a maximum width.
<span style="height: 0px; width: 200px; display: inline-block;"></span>
I came across this issue, as well -- even though the 304px width is plenty, I had a card in the content area to the right that was squeezing the sidenav. So, using the flex grid I was able to add <md-sidenav flex="15" class="md-sidenav-left ... to get the width I wanted without overriding CSS. It sounds like this didn't work for you, so maybe it has to do with the layout options in your design...
I cannot use JS, this should be archived by CSS only. Container (DIV) is auto width (flexible) "table-cell" element.
I'd want to scale image down only when it width is larger than container (user can resize window - that's the reason).
I've used code shown below but it work only on IE7.
max-width: 100%;
height: auto;
width: auto\9;
I've tried to find any working fix for IE9, but without success.
Your max-width needs to be set to the image size and then width to 100% like so:
img {
width: 100%;
max-width: 500px;
height: auto;
}
Of course, this means that your max-width must be dynamically set based off the image being loaded, which may not be practical.
I stumbled upon this old question while trying to do the exact same thing the OP was trying. I am answering for anyone who may land here. Upon examining http://jsfiddle.net/SAada/2/ mentioned by the OP, I found an interesting solution:
setting
height: auto;
will ensure that the image will not be stretched / scaled up. At the same time, setting
max-width: 100%
will ensure that if the parent element width is less than the image width, the image is scaled down.
Thus, the combination that works for me is:
img {
max-width: 100%;
height: auto;
}
Oh, and after some more search, I discovered that this technique is also used by Bootstrap for responsive images!
I have the following CSS:
#middle {
float: right;
width: 590px;
height: auto !important;
min-height: 100%;
height: 100%;
}
My goal is to get the #middle div to extend all the way to the bottom. This code works perfectly in FF but does not in WebKit browsers. I've figured out that this is due to the float: right property, without floating, this issue doesn't persist
In WebKit browsers, it looks like min-height is being deduced and permanently set on the #middle div. This can be viewed by loading the page with the window contracted and then expanding the window to a larger size.
Here is a demo site of the issue: http://staging.similarblue.com/about/beliefs/
I realize I could use some JS to handle this (on window resize) but I was wondering if there's a pure CSS alternative.
Here is a screenshot of the issue: http://i56.tinypic.com/s49e37.jpg
Thanks!
Two lines up in your style.css file there's a height:auto!important declaration, which is overriding your height:100% declaration. Without that line, your site looks fine!
What you may be looking for is this. It's served me well in the past, hopefully it helps you!
What you could do is make the background div:
position: fixed;
top: 0;
bottom: 0;
And then put the content in a separate div on top of the fixed background. Here's an example: Demo
EDIT: accommodated scroll.