On this page, the columns for the video thumbnails don't seem to display consistently (equally) on Chrome. On IE and FF, both column widths are equally displayed.
My global CSS for image have been set to:
img {
height: auto;
max-width: 100%;
}
Altering any values will affect other image rendering. Any ideas?
The issue is that you don't actually set a width, meaning browsers and images can render any way they want, giving unpredictable results as you've seen.
The easiest solution is to just size your columns to a fixed 50% width, like so:
.page-videos .view-video td {
width: 50%;
}
Leave the max-width: 100% in place, it will ensure that even large images fit this 50% perfectly.
Feel free to replace the classes of my sample code, they are simply a best guess at ensuring we only change this one table, but you may know better/more-specific classes for this project.
Removing max-width globally fixes it, or override it with min-width instead. max-width only sets the maximum width permitted, not an actual width
.cboxElement img {
height: auto;
min-width: 100%;
}
Related
I have a 64px that I would want to scale with browser window I have added max-width 100% but the image stays the same.
Html
<img src="../images/GitHub-Mark-64px.png">
CSS
img{
max-width: 100%;
height: auto;
}
If your image is smaller than the containing DIV, your CSS rule won't make it any bigger. Try to use width instead of max-width:
img{
width: 100%;
height: auto;
}
Addition/Edit after Comments of OP:
You can use any percentage value in this rule, like 60% (or whatever you like), but using width, not max-width (which is only a maximum limit, but not an actual size definition).
But note: It won't really look good if the original image is smaller than displayed and is "blown up".
Try using width instead of max-width in your CSS, width attribute actually sets the width of the img. However, setting it to 100% would actually cover the entire space, so perhaps you should use a lesser percentage accordingly.
Read: CSS Image size, how to fill, not stretch?
If you want to use the image as a CSS background, there is an elegant solution. Simply use cover or contain in the background-size CSS3 property.
width: 100%;
height: 100%
background-size: cover;
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...
Using a regular, reasonably wide Google Chrome browser, see http://abmphotography.beta.cjbm.net/aileen-kevin
The height of the images is defined in CSS, but the width should be automatic. It seems to work with the portrait images, but the landscape ones are limited to a maximum of 500px wide.
Can anyone shed any light?
Colin, you are setting the max-width to 100% on two selectors:
img
.thumbnail > img
This is making the image as large as the container, thus not allowing for the expansion you seek. Disabling the max-width properties on Chrome made the image fit the height as you would expect, as it should on other browsers too.
To get the proper output as other browsers you have to remove the max-width from css, see below. I have removed the max-width:100%; from the below css.
.thumbnail > img {
display: block;
margin-left: auto;
margin-right: auto;
}
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 an image in the header of my website. I'd like to use a CSS property to make it stretch across the width of the browser, so that it reacts to the user adjusting the browser window size, and so that the vertical axis of the image is scaled accordingly. Is this actually something that can be done?
Percentages will keep an image the whole width, and will update the image on browser resizing.
If you want the image to always be stretch, you can use:
img {
width:100%;
}
However, that can easily make the image look like total crap. A safer way might be:
img {
max-width:100%;
}
Either way will get the image changing sizes with browser resizing. However, the second won't stretch the image past it's natural size, so it doesn't look deformed.
You can set the width and height properties to percentages (for example, a width of 100% would cause the image to stretch across your page). This can be done using CSS.
CSS can certainly stretch an image (or, at least, I've used it to do so in Firefox at the folowing url: http://www.davidrhysthomas.co.uk/mindez/borked.html):
img {height: 100%;
width: 100%;
min-height: 600px;
min-width: 800px;
}
for example.
But...I think for it to react to the viewport resizing that JS would be probably your better-friend.
Here, give this a go, just apply this CSS style to the element that contains the image. In this example the image is on the background of the page body:
body
{
margin: 0;
padding: 0;
width: 100%;
background: url(images/YOUR-IMAGE.JPG) no-repeat left top;
background-size: 100%;
}
This will maximise your image across the element. Resizing the window will scale the image to fit the browsers new window size