I am looking for a way to target a specific image with CSS, if this is even possible.
I am running a CMS where the users can upload images and put them on their pages. I would like a way to target images with specific dimensions.
So the question is, can you make a css line target a image or object with certain dimensional specifications ?
I would imagine something like :
img#width:400px { float :left; }
(to make images that are 400 pixels wide have float:left)
I know i could give the image a class or an id, but it would be lost when the customer plays around in the cms.
img[width="400"]{
float:left;
}
This will make any image that have the attribute set to 400 float left:
<img src="image.jpg" width="400" />
Note: this will only work if the width attribute is set. Will not work if the image is 400px wide but does not have a width attribute set.
According to the spec this should work
img[width=400]
but I haven't tried it
Related
I'm trying to use <img srcset /> to load images based on the size they'll appear on the page, rather than based on the size of the viewport. Perhaps examples will help:
On any viewport, when the image is styled with width: 100% inside a 200px-wide <div>, img-200.jpg should load.
On any viewport, when the image is styled with width: 100% inside a 400px-wide <div>, img-400.jpg should load.
...etc.
I've done tons of Googling, but as best as I can tell, srcset is only used for changing images based on viewport size, not image size, if that makes sense. Is that correct? Or is there hope for what I'm trying to accomplish?
As was mentioned in the comments, this doesn't exist yet.
However, I've been thinking. If you don't mind a little trickery, there's a workaround.
We can use an iframe.
To the contents of an iframe, its width is the viewport. So then we can use the standard srcset tricks.
Let's say our img looks like this
<img src="https://placehold.it/200x100" alt=""
srcset="https://placehold.it/200x100 200w, https://placehold.it/500x250 500w">
using the 200x100 image at smaller resolutions (200px or less) and the 500x250 one at higher resolutions.
We can then put this in a HTML file with a zero margin around it, because the iframe expects an actual HTML document.
Now to avoid having to load multiple files, we can turn this into a data URL, which will look as follows:
data:text/html;charset=utf-8,%3Cbody style='margin%3A0'%3E%3Cimg src='https%3A//placehold.it/200x100' srcset='https%3A//placehold.it/200x100 200w, https%3A//placehold.it/500x250 500w
and all that will make our original HTML page look something like this.
Note that, to show it works, I included two iframes, which are identical in themselves. Only their CSS widths differ.
iframe {width:200px; height:100px}
iframe ~ iframe {width:400px; height:200px}
<iframe src="data:text/html;charset=utf-8,%3Cbody style='margin%3A0'%3E%3Cimg src='https%3A//placehold.it/200x100' srcset='https%3A//placehold.it/200x100 200w, https%3A//placehold.it/500x250 500w' alt=''%3E" frameborder="0">?</iframe>
<br><br>
<iframe src="data:text/html;charset=utf-8,%3Cbody style='margin%3A0'%3E%3Cimg src='https%3A//placehold.it/200x100' srcset='https%3A//placehold.it/200x100 200w, https%3A//placehold.it/500x250 500w' alt=''%3E" frameborder="0">?</iframe>
OK this is the case : we want to display image in 50% of view port when viewport size is 800px or more otherwise image is 100% so the html look like the following:-
<div class="container">
<img src="image.jpg" srcset="image.jpg 500px" sizes="(min-width:800px) 50vw,100vw" />
</div>
OR we can simply do the following through css:-
.container img{
min-width:100%;
}
#media screen and (min-width:800px){
.container{width:50%}
}
So we can control image container instead of image itself, my question here is is there is a condition that sizes attribute is considered as the best solution ?
Notice:- I know that in the first example image size will be calculated based on the view port width and not the container width
If you really only have one image resource, then you can do this with CSS only. srcset+sizes is only necessary if you want to let the browser choose which image file to download from a set of multiple files with different sizes. In that case, basing on viewport with in sizes is the only option (because browsers start to download images before external CSS has been downloaded, so container size is unknown).
How to scale image in email body ?
I am adding html template in an email.And there is an image in that template.
And i wants,the image should be fit according to email client width.And the height should be adjust according to image width.Something like this:-
It should work in all email providers.
FYI,i am working on ASP.NET application.
Edit:
I sets the image width 100% and i am not setting the image height there.
Is this a best or correct way for it?
I would go for setting:
width: 100%;
height: auto;
Demo: http://jsfiddle.net/gjtC9/
Without CSS: http://jsfiddle.net/gjtC9/2/
The question if it's the best and correct way.. well if someone opens the email on a mobile phone where is the resolution quite small - so the huge image is scaled to smaller one quite a lot.
-> The phone will be loading huge image which will be scaled to small - this brings me more to question, is that picture really necessary? Are you going to put there those pinguins or some image that has some information or something valuable on it? :D
Use inline styles.
Like this:
<img style="width: 100%; height: auto;" ...
Ensure your img tag is not in container that sets or restricts height of the image
If you still need a container or have difficult interaction with other styles, use max-width, not width.
<img style="max-width: 100%" >
In the following image, you can see that the actual email body starts under the to object of email. I am not able to understand why do you want to do something more wide.
From your image: The image image you are providing, the photo is scaled correctly. It fits the div wrapping it, from left to right.
In my image: Well its just a text, but you can see the text starts just under the to object.
Result: You can not scale or make the image wider than this. However, I am sure you understand that you when you set the width to 100%. The browser actually does provide a 100% width from that width. Exceeding this size will maybe cause a bit problem in UI and gmail will never allow you that.
I hope you get my point.
I'm trying to create a fluid-layout in html, containing images.
For now, I support 2 sizes for the layout. The default layout is used to display a 1000px wide site. If the screen is wide enough (wider than 1200px), I enhance many aspects with css media queries.
I have a DIV container that is 600px wide for the default layout, and 700px for the enhanced layout.
There is a random image inside, for which I know some metadata (width and height). I may need to downsize the image if it is too large for the container.
So I use this code to have a fluid-layout
<div class="container">
<!-- for a 650px/400px image, the downsized version is 600px/369px -->
<img src="/image?id=1234" width="650" height="400" style="width:600px;height:369px" />
</div>
and the style
#media screen and (min-width:1200px){
.container IMG {
width:auto !important;
height:auto !important;
}
}
Here is how it works:
In case of the default layout, the inline style applies. So the image is down-sized to 600px/369px to fit the container.
Otherwise, the media query style applies, and the image is at its default width/height (I know the image is never wider than 700px so all is fine).
My problem comes from the loading state of the image and the space reserved by the browser. The behaviour of chrome/firefox is the same but is quite strange for me. Not tested with IE (not my priority actually)
For the default layout, no problem, the inline-style still applies. The browser displays a white space corresponding to the image.
For the enhanced layout, the "auto" sizes applies. But the browser does not know the natural size of the image while it is not fully loaded, and it appears that "auto" is equivalent to 0px. It would be perfect if the width and height attributes set for the image applied. But it is not the case. The result is that no space is reserved for the image, which is not the behaviour I want.
A first solution I found is to add another inline css rule for the image. If I add "min-width:600px; min-height:369px" the reserved space for the image is always 600x369 pixels, instead of 0 pixels for the enhanced layout. That's better, but not perfect yet.
-- What do you think ?
Is it possible to "reset" the css instead of overriding it with the "auto !important" rule ?
Should I use an other approach ?
I may use some javascript, but I think it is a bad idea to rely on it. Actually, I may have a lot of containers similar to the one described above. I prefer an automatic solution (css is great for that).
you can just set the width or height to initial.. that resets the Value on override..
The general approach that I've seen thrown around for responsive images is to have a parent element (like .container) change sizes with media queries. In your markup remove the width and height attributes, and then in your CSS add:
img {
width: 100%;
}
As your parent element's size is dictated by media query rules, your image will grow accordingly.
I'm bringing this up because it looks like you want to use the same image file, but just have it grow/shrink. The major drawback is that a larger image could load on a mobile device screen, and add to page load. This is the major technical hurdle facing Responsive design currently, and there is great debate about the best way to address it.
Use .container IMG.someClass { ... } then you can remove the class name from the image to remove the CSS styling.
http://sorgalla.com/projects/jcarousel/
Above is the carousel application i'm using (one of the more popular open source ones at the moment) and I can't figure out how to change the default image width as I have a dozen or so pictures that all have a pixel width of 170px and yet the current setting seems to be set at around 80px which makes all of the images overlap, how do i change this? Is there a way to add some margin in as well? I tried changing the css in jcarousel/skins/tango/skin.css but apparently, even when I delete everything in that css file, nothing gets affected on the carousel page - when I remove the link the carousel stops functioning and turns into a wide div with static images, which is very odd to me.
That carousel uses <img> tags which means you'd either have to specify each width in the markup like this:
<img src="..." height="..." width="170" />
or use the img selector in the CSS file, something like this:
.jcarousel-skin-tango .jcarousel-item-horizontal img {
width: 170px;
}
Either way, you'd also have to make the carousel container wide enough to accommodate its contents. You can give the containing ul some large width (the excess would be hidden anyway), like:
ul#carousel {
width: 99999px;
}
The carousel would stop at the last image anyway, but at least you'd know you have more than enough room to accommodate however many pictures you have and prevent the overlapping.