I am trying to center an image in a block using CSS and HTML. The code I am currently using works for both firefox and chrome but Microsoft Edge will not center. Chrome and firefox are both picking up the webp format of the image, while internet explorer is picking up the png.
I have tried using inline property instead of block for css. I have tried creating a function in CSS and applying that function to the HTML. I have tried setting an attribute name to the HTML box and editing the css to alter that box only. Virtually all of these things except for inline have worked on chrome and firefox. None work on edge.
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.png" type="image/png">
<img src="image.png" alt="circle of excellence" class="displayed" width="300" height="290">
</picture>
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto }
I expected the image to be centered on all browsers. It was centered on all but Internet Explorer. I take this to mean there is something wrong with the way the png image is interacting with the code. Or my code is written in such a way as to exclude the png from centering.
Apparently the cash needed to reset in my microsoft edge. This code works perfectly. SMH
I just center the picture tag and it is working fine..
try this...
picture {
display: block;
text-align: center;
}
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.png" type="image/png">
<img src="image.png" alt="circle of excellence" class="displayed" width="300" height="290">
</picture>
Related
I've been converting some images on a website I'm working on to webp to optimize page-load times and score higher on lighthouse and all of that.
I used fallbacks in my code such as below:
.flex {
display: flex;
justify-content: space-around;
background: #ddd;
padding: 5px 0;
}
<div class="flex">
<div>WEBP image:<br> <img src="https://www.gstatic.com/webp/gallery/1.sm.webp" style="height: 80px;" /></div>
<div>JPG image:<br> <img src="https://www.gstatic.com/webp/gallery/2.sm.jpg" style="height: 80px;" /> </div>
<div>Fallback image (JPG):<br> <img src="https://www.gstatic.com/webp/gallery/4.sm.jpg" style="height: 80px;" />
</div>
</div>
<div>
Test image:<br>
<picture>
<source srcset="https://www.gstatic.com/webp/gallery/1.sm.webp" type="image/webp">
<source srcset="https://www.gstatic.com/webp/gallery/2.sm.jpg" type="image/jpeg">
<img src="https://www.gstatic.com/webp/gallery/4.sm.jpg">
</picture>
</div>
I'm obviously testing on Chrome because I know Safari doesn't support WEBP, but it seems my chrome is always falling back on the jpeg and png files. When I inspect, I see the WEBP is in the code, and I can click it and it opens from the server so it is there. But Chrome isn't using it to render the page, it's immediately falling back on legacy formats.
I've been pulling my hair trying to figure out why it's not working--maybe I used the picture tag incorrectly, etc...--but no solution.
Finally, I linked Modernizer in my layout, and saw that it wasn't inserting any webp class into the html element. So I added a short script below it to see what's happening, as below:
<script>
if (Modernizr.webp) {
console.log('webp supported');
} else {
console.log('webp not supported');
}
</script>
And the console logged the else webp not supported.
At this point, I'm lost. I've trying looking up online, and I see no mention of Chrome dropping WEBP support or anything. My only guess is that I'm omitting and obvious declaration or something.
I'm in the process of converting our images to webp, which means I need to use the 'picture' tag instead of 'img', as picture allows for a fallback to png formats for devices and browsers that don't support webp.
Anyway, I have an img that looks like this:
<img class="usp-pics pic1" src="/images/example.png" alt="" title="">
So, converting this to webp with the ability to fallback to png would look something like this:
<picture>
<source srcset="/images/example.webp" type="image/webp">
<source srcset="/images/example.png" type="image/png">
<img class="usp-pics pic1" src="/images/example.png" alt="" title="">
</picture>
If a browser reads the above code and takes the first webp image, will it also apply the classes, alt & title tags attached to the img element or do I need to repeat them for each source, or add them to the parent picture tag?
I've tried to look this up but I can't find an answer. Maybe because it's obvious or maybe because I'm using the wrong words to describe the issue. Sorry if this has already been covered somewhere.
Acccording to MDN the <picture> element simply takes the content of the <source> and puts it inside the space defined by the <img> tag:
The browser will consider each child <source> element and choose the best match among them. If no matches are found—or the browser doesn't support the <picture> element—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.
(My emphesis)
Therefore, I would expect that the classes on the <img> tag would still appear to the end user, regardless of which (or any) <source> material is used.
My Testing:
But I had not checked this. So I decided to run a few tests with image types (PNG / JPG / Webp) and <picture> elements:
.one {
border: 3px solid #f00;
}
.two {
border: 3px solid #0f0;
}
.thr {
border: 3px solid #00f;
}
.fou {
/* Picture Element */
border: 3px solid #333;
display: inline-block;
}
<picture class='fou'>
<source srcset="https://www.gstatic.com/webp/gallery/3.webp" type="image/webp" class='thr'>
<source srcset="https://developers.google.com/web/fundamentals/design-and-ux/responsive/img/art-direction.png" type="image/png" class='two'>
<img src="https://images.pexels.com/photos/163016/crash-test-collision-60-km-h-distraction-163016.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" title="" class='one'>
</picture>
From the above example, and from editing it and playing with it by
Rearranging the <source> materials.
It can be easily found that:
The <source> elements are NOT hidden on the page,but do not contain the graphical content.
Regardless of the <source> used, the <img> element is always the element that contains the picture graphic (sometimes called an image (WTF?) ) .
The <picture> container object always exists but is a container such as <figure> in HTML5. It should not be given CSS styling intended for contents such as <img>.
Conclusion:
The code above (and its fiddles and edits) shows that all elements are present in the HTML, but the only one that is the image is the <img> element.
Therefore, you should not be applying any styling or CSS whatsoever to <source> elements and only container stylings should be applied to <picture> elements.
You Asked:
Do I need to repeat the class attribute for each source inside a picture element?
The Answer:
The answer is NO. You should style the <img> element ONLY.
Example:
<picture>
<source srcset="/images/example.webp" type="image/webp">
<source srcset="/images/example.png" type="image/png">
<img class="usp-pics pic1" src="/images/example.png" alt="something" title="">
</picture>
This question already has answers here:
How do I auto-resize an image to fit a 'div' container?
(33 answers)
Closed 2 years ago.
I've looked at many other threads concerning this question but none of the solutions seem to be working. For example, max-width: 100% and height: auto does not make the images responsive. They look great on IE, FF and Chrome on desktop. The problem is they won't scale for mobile devices, including chrome for Andriod 10 and Safari running iOS 13. The extent of my knowledge runs out here so I need help.
<div class="image">
<img src="images/last-supper.png" alt="The Last Supper by Leonardo da Vinci">
</div>
.image {
padding-top: 2.5em;
width: 100%;
max-width: 600px;
height: auto;
}
This is the code before I tried width:100% height:auto and max-width: 600px and also I tried removing shrink-to-fit=no from the <meta> I tried both on my external CSS stylesheet and inline HTML, and none of it worked. Could y'all please help walk me through this and figure out what's wrong?
GitHub repo for full code: https://github.com/ErichMB/the-christian-gallery
Gh-pages deployment: https://erichmb.github.io/the-christian-gallery/
You can try using a <picture> element - https://www.w3schools.com/tags/tag_picture.asp so instead of scaling, you can actually use a whole separate image specific for mobile.
I usually do 375px (mobile), 768px (tablets) and 1280px (desktop).
<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
I got at problem! I have used <picture> in my html and I see now that it is not supported in Safari and IE. I have one image for browser max-width: 660px and a new image for browser min-width: 660px. Do anyone have some suggestion on how to do this?
img {
max-width: 100%;
}
<picture>
<!-- Use CSS media queries in media attribute (this will show for screens less than 661px) -->
<source srcset="http://lorempixel.com/660/200" media="(max-width: 660px)">
<!-- Default image (this will show for screens greater than 660px) -->
<source srcset="http://lorempixel.com/1200/400">
<!-- Use this image if <picture> element isn't supported -->
<img src="http://lorempixel.com/1200/400" />
</picture>
I'm trying to use the <picture> element, which is created by the picturefill js library, inside of a web component I'm creating using Polymer, but it is choosing the smallest possible image as <picture> is not getting any dimensions from the container element.
I have tried giving :host a display:block among a myriad of other atempts at doing this with styling, including making sure the container is 100%, but nothing works.
Here is a codepen of what I'm trying to do showing the polymer-made element using the smallest image, then the <picture> element on it's own showing the correct image.
Note that in the live codepen version that the <hr> (horizontal rule) elements created by the polymer-element are the full width and thus understand the correct width of the container.
This is the code in the codepen:
```
<polymer-element name="picture-container" attributes="value">
<template>
<style>
:host {
display: block;
border: 1px solid #000;
padding: 1em;
}
</style>
<hr>
<h2>Picture In Polymer Element</h2>
<picture>
<source srcset="http://www.placecage.com/c/500/500" media="(min-width: 500px)">
<source srcset="http://www.placecage.com/c/200/200" media="(min-width: 400px)">
<img srcset="http://www.placecage.com/c/100/100" alt="An example of the picture element">
</picture>
<hr>
</template>
<script>
Polymer('picture-container');
</script>
</polymer-element>
<picture-container></picture-container>
<hr>
<h2>Picture In Polymer Element</h2>
<picture>
<source srcset="http://www.placecage.com/c/500/500" media="(min-width: 500px)">
<source srcset="http://www.placecage.com/c/200/200" media="(min-width: 400px)">
<img srcset="http://www.placecage.com/c/100/100" alt="An example of the picture element">
</picture>
<hr>
```
any help on this greatly appreciated.
thanks,
Scott
UPDATE
There is a running thread on this on the picturefill github issues section. That thread gave a new option in the script section which made this work correctly in Firefox and Safari:
<script>
Polymer('picture-container',{
ready: function() {
picturefill({elements: this.shadowRoot.getElementsByTagName('img')});
}
});
</script>
Example codepen: http://codepen.io/scottnath/pen/Wboayg
I discovered that in Firefox (33.03) if I go into about:config and change these two settings to true:
dom.image.srcset.enabled
dom.image.picture.enabled
then this mimics the incorrect behavior of chrome for the picture element.
Still no solution though...