I have modified a Marketo responsive email template and need to swap out the header image when the media query hits its breakpoint. However many versions of outlook do not support background images (thank you Micro$uk) so is there a way to write the CSS to swap out an image in with src and not background-image? Here is a screen shot from litmus.com you can see the image doesn't appear in many versions of Outlook.
<img src="image1"/> to <img src="image2"/>
javascript probably wont work in a lot of email clients. i use the below code for my HTML email templates.
HTML
<a href="#" border="0">
<span id="mobile">
<img id="mainimg" class="headimg" src="#" alt="...">
</span>
</a>
CSS
#media only screen and (max-width: 450px) {
span[id=mobile] {
display:block;
background-image: url(#) !important;
background-repeat: no-repeat !important;
background-position: top center !important;
width: 100% !important;
height: # !important;
}
img[id=mainimg] {
display: none !important;
}
}
just replace the "#" w/ your links and/or height of the mobile img and you can set that breakpoint to whatever you need it to be. i get really good results and pass all of the litmus test w/ exception of lotus notes.
hopefully that helps.
In HTML...
<div style="src:www.google.com"></div>
And try this in javascript... (I haven't tested it)
Element.getElementsByTagName('img')[0].src='www.google.com';
Related
I am new to media queries. I have it setup to swap an image based on the portal size. That is working great with the following code:
<header>
<div class="logo_div">
<img src="images/logo_full.png" class="logo_full">
<img src="images/logo_small.png" class="logo_small">
</div>
</header>
/* Logo DIV */
.logo_div {
margin: auto;
width: 50%;
}
/* Logo */
.logo_small {
display: none;
}
#media (min-width: 1200px) {
.logo_full {
display: block;
text-align: center;
}
.logo_small {
display: none;
}
}
My large logo is centered just fine. My small logo however sits to the right. I have tested this by simply changing the browser window size as well as on my iPhone XSM. On my phone, it is obvious that the small logo is to the far right.
Am I missing something here?
You can see this live also by going to http://thelavender.net/_fades/
For me the best way to center any object is:
#myobjectid{
display:table;
margin:0 auto;
}
In your case put it to your div container, and remove width.
Inside your image, put your width tag.
I want to add that you're making two http requests, for both the large and small logos, when you really need only one. Have you considered using picture?
The HTML <picture> element contains zero or more <source> elements and
one <img> element to provide versions of an image for different
display/device scenarios. The browser will consider each child
<source> element and choose the best match among them; if no matches
are found, the URL of the <img> element's src attribute is selected.
The selected image is then presented in the space occupied by the
<img> element.
This following snippet will produce only one logo at a time and shrink your CSS significantly.
<picture>
<source srcset="logo_full.png" media="(min-width: 1200px)" />
<source srcset="logo_small.png" />
<img srcset="logo_full.png" alt="My default image" />
</picture>
I'm working on a site that uses Bootstrap. I'm working to make this site work on both desktop and mobile browsers. Everything's working except for my banner image size.
I have an image that is 640x480. I have an image defined like this:
<img alt="My Picture" src="/wwwroot/img/banner.jpg" style="height: auto; max-height:320px; max-width: 100%;" />
On mobile pages, the image looks just like I want. However, on the desktop, the image is only 320px wide. However, on the desktop, I want the image to go as wide as it can go. Basically, I want to crop the right portion.
Is there a way to do this with CSS?
Thanks!
Stick your CSS in a class.
If using HTML5 remove the superfluous /
Change your max- to min- regards height.
Change your standard width: to auto, changing you
CSS:
.imageFun {
height: auto;
min-height:320px;
width:100%;
/* this is actually no longer needed but kept for posterity */
max-width: 100%;
}
HTML:
<img alt="My Picture" src="/wwwroot/img/banner.jpg" class="imageFun">
Use a media query to target the img in css file:
#media only screen and (min-width : 320px) {
img {
width:100%!important;
}
}
That should work changing the min-width to your desktop size.
More info here
on twitter-bootstrap you can use div with class responsive width :
<div class="col-md-12 col-sm-12 col-xs-12">
<img alt="My Picture"
src="/wwwroot/img/banner.jpg"
style="height: auto; width: 100%;"
/>
</div>
Where value 12 is width scala on grid bootstap. Please look at : https://getbootstrap.com/examples/grid/
i hope it what U want
You are using Booststrap, so remove the inline styling and add
class="img-responsive col-xs-12
That will fix it.
I am working with an HTML template, and I'm trying to replace the site's logo based on browser size using media queries.
I am trying the technique I found here: #media queries and image swapping
My custom.css file has this code:
.test-mobile-logo{
display: none;
}
#media only screen and (max-width: 500px){
.test-main-logo{
display: none;
}
.test-mobile-logo{
display: block;
}
}
My html file has this code for the logo:
<div class="logo">
<a href="index.html" >
<img src="images/logo-dark.png" alt="" class="test-main-logo">
<img src="images/logo-main.png" alt="" class="test-mobile-logo">
</a>
</div>
The page is showing both images at once though. But when I remove my style.css file, the images finally show one at a time and replace properly.
The style.css file: http://demos.webicode.com/html/lucian/html/css/style.css
I'm not sure what the conflict is, I'm still new to CSS. Does anyone have any ideas?
You have this style in your css that overrides your display styles.
img {
display: inline-block !important;
}
Remove the !important to make your media-query work.
I agree with #HenrikhKantuni use a background image and change the background image in the css media query.
Otherwise users will always be downloading 2 images, that's one unnecessary http request and kilobytes the user will be requesting, especially over mobile networks you want to reduce this as much as possible.
as #VincentOrback mentioned just delete the !important from img selector
Better technique: use background-image instead and just change the url, or (even better) use CSS Sprites
I'm searching a way to EASILY add responsive alternative images to content. For example I have three different images, one for each size (desktop, tablet and mobile) and would like to show them according to responsive breakpoints.
Foundation framework has "interchange" built in, but there is no easy way to add the images except by adding the code:
<img data-interchange="[/path/to/small-image.jpg, (small)], [/path/to/bigger-image.jpg, (large)]">
Anybody know any plugin that could do this?
You can insert all three images in the page and show every image for specific screen width;
<div>
<img class="image-small" src="/path/to/small-image.jpg" />
<img class="image-medium" src="/path/to/medium-image.jpg" />
<img class="image-big" src="/path/to/big-image.jpg" />
</div>
.image-medium,
.image-small{
display: none;
}
#media screen and (max-width: 800px){
.image-medium{
display: inline;
}
.image-big{
display: none;
}
}
#media screen and (max-width: 400px){
.image-small{
display: inline;
}
.image-big{
display: none;
}
}
i'd suggest to use the Srcset attribute and then implement fallbacks (ex. picturefill) for browsers you need to support.
by viewport
<img src="img-1x.jpg"
srcset="img-1x.jpg 500w, img-2x.jpg 800w"
alt="">
or by resolution
<img src="img-1x.jpg"
srcset="img-1x.jpg 1x, img-2x.jpg 2x"
alt="">
Ok, I solved it like this. (http://i.stack.imgur.com/jWcDD.png) I used the Visual Composer plugin and made a simple add-on plugin that enables content editor to attach two different images. The plugin just writes these image tags and Foundation frameworks css hides and show them accordingly:
<img src="default.jpg" class="show-for-medium-up">
<img src="small.jpg" class="show-for-small-only">
I couldn't get Foundations Interchange images to work inside Visual Composer. Maybe it has something to do about javascript queue. Visual Composer content loads after foundation or something..
I'm putting together some Responsive CSS for a website I'm building and I'm curious if I can use CSS to force images to render as alt text instead of images. We are displaying the logos of cosponsors but because of their variable size it's hard to fit them confidently into the responsive design. For that reason we'd like to store the company name as alt text and render that instead. Of course we could place the name in a separate element and toggle the visibility using CSS but using alt text seems DRYer.
You could store that in a data-attribute rather than the alt text, and then do something like this:
<span class='responsive' data-alt='foo'>
<img src='http://www.ponyfoo.com/img/thumbnail.png' alt='' />
</span>
#media only screen and (max-width: 300px) {
.responsive:before {
content: attr(data-alt);
}
.responsive img {
display: none;
}
}
The reason you can't do this just with CSS and an img tag is that img tags is because they are replaced elements, which means pseudo doesn't work with them, and therefore, using :before doesn't work with them.
Another approach, taking this into account would be the following:
<span class='responsive'>foo</span>
.responsive {
background-image: url('http://www.ponyfoo.com/img/thumbnail.png');
text-indent: -9999em;
overflow: hidden;
width: 180px;
height: 180px;
display: block;
}
#media only screen and (max-width: 300px) {
.responsive {
background-image: none;
text-indent: initial;
overflow: initial;
}
}
If you ask me, I like the second approach a lot more.
Went with:
<div class="cobranding">
<span>Brought to you by</span>
<span class="sponsor">Joe Shmoe Inc.</span>
<img src="img/graphics/joe_shmoe_logo.jpg">
</div>
Using CSS to toggle the visibility of the img or the "sponsor" based on responsive breakpoints.
Both of Nico's approaches look good. The only hiccup is that these cosponsor logos are going to be added via a CMS so I want to steer away from any solution involving case-by-case CSS (:before or background-image). For the sake of time I went ahead with the two element strategy above.
(answered for any others looking for a solution)
Important aside:
Remember the purpose of alt: to display meaningful ALTERNATIVE information (if the image doesn't load).
- so any implementation should not break that... (bad for accessibility & SEO).
That said...
If the image doesn't load, the alt will be displayed. So (untested) but you could try messing up the src attribute by javascript... this should cause the browser to display the alt since the image wont load.
- you might find this approach along with lazyload useful.
Also to note: a broken img doesn't behave like an image, so you can apply a img:before css rule (and use content: attr(alt) )