I have view port ~1200px and picture container has 180px. This code:
<picture>
<img srcset="img_180.jpg 180w, img_350.jpg 350w" src="img_350.jpg" alt="">
</picture>
loads img_350.jpg. Why it happens if image container is 180px?
Okey, maybe I have to set sizes attribute. My picture container is 180px if view port is > 576px, else it has 100% width. So this code:
<picture>
<img sizes="(min-width: 576px) 180px, 100vw" srcset="img_180.jpg 180w, img_350.jpg 350w" src="img_350.jpg" alt="">
</picture>
loads both img_180.jpg and img_350.jpg. How to fix this? I need to load img_180.jpg only if user has > 576px view port, else load img_350.jpg, because if <= 576 px picture container has 100% width.
You might think because img_350.jpg loads automatically from src, but that's not right, because I added <source ... type="image/webp"> and it loaded img_180.webp and img_350.webp (no .jpg).
https://jsfiddle.net/wLprbk7j/
This is because you have both src and srcset defined. Remove src attribute. This will let browsers calculate the src based on srcset and media queries. Browser will then automatically load the correct image.
As a fallback, remember to include picturefill.js
Related
my client wanted to convert all images into webp, so I had to use the picture tag to do so, but the final result is a picture tag with 0x0(checked in the google inspector), not sure if that is correct, I do see the picture being served (not sure if it is the webp or png because in the inspector they both load up)
<picture class="mx-auto absolute z-10 -mt-28 left-1/2 -ml-14">
<source type="image/webp" srcset="http://localhost/images/pirate-footer.webp">
<source type="image/png" srcset="http:///localhost/images/pirate-footer.png">
<img id="pirate-img-footer" class="mx-auto absolute z-10 -mt-28 left-1/2 -ml-14" src="http://localhost/images/pirate-footer.png" alt="" loading="lazy">
</picture>
Also not sure if I should load the class styles also in the picture tag and only in the img tag, this example breaks the positioning of the image because there is two position fixed
(sorry for the probable mistakes, I'm not a native english speaker)
I'm trying to work after another developer on a wordpress website. I am triyng desperately to get a fullwidth image to cover 100vh in height too, but whatever I do, I get the div to 100vh, but the image keep the same size. I've tried in the inspector and if I directly apply the style
min-height : 100vh;
it works perfectly but I cannot found anywhere in wordpress to apply this style to the image directly. I even tried via a child selector in the global custom css
#my-image-id img
{
min-height : 100vh;
}
HTML:
<div id="title-image" class="et_pb_module et_pb_fullwidth_image et_pb_fullwidth_image_0">
<img src="PRIVATE.jpg" alt="" title="" srcset="PRIVATE.jpg 3408w, PRIVATE.jpg 300w, PRIVATE.jpg 768w, PRIVATE.jpg 1024w, PRIVATE.jpg 1080w" sizes="(max-width: 3408px) 100vw, 3408px">
</div>
or in the custom css of the element, it's like wordpress just cannot read it, the property isn't even present in the inspector (not even striked). (And I tried to add an "!important" despite everything, it changed nothing)
Thank you already !
How do i, change the size of picture that their size more than a certain size with css . For example, how do i change the appearance of photos that their width is more than 300 pixels.
Some basic info on working with images:
http://www.w3schools.com/w3css/w3css_images.asp
Some possible ways to resize images:
Either style the image through css:
img {
width:200%;
}
Or do so with inline css
<img style="width:500px;" src="..."/>
or use HTML attributes
<img width="30px" height="auto" src="..."/>
As shown here you can use different kinds of units too. px, %, em, rem, vw & vh are some that are available.
Media queries
If you want to apply different styles depending on the page size, use media queries.
Image-size dependent styling
If you want to apply different styling to your image depending on it's source size, I think you're out of luck. You can use javascript to do it, but as far as I know there isn't a pure CSS solution.
Nota Bene
It should be noted, though, that your question raises the suspicion that you didn't even bother googling, as this is absolutely basic HTML / CSS.
You can use the min width/height and the max width/height:
Example:
p {
max-width: 100px;
}
If you want a more control u can use media:
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 400px)">
<source srcset="img_flowers.jpg">
<img src="img_flowers.jpg" alt="Flowers">
</picture>
I have two images, one I need for landscape orientation and one for portrait.
Using <picture>, i can use standard media queries, but <picture> is not supported on Safari, so i want to use <img srcset>. I can't find any information, how to adress portrait orientation for any device in srcset.
Any help?
You can't use srcset for art direction. Use <picture> and picturefill instead.
safari now supports <picture> . Here is code to display different images for portrait and landscape modes.
<picture>
<source media="(orientation: landscape)" srcset="landscape.jpg">
<source media="(orientation: portrait)" srcset="portrait.jpg">
<img src="fallback-image.jpg">
</picture>
Is it possible to cross-browser style the controls of a browser-native video such as video from HTML5's video tag?
I do not understand if it is possible or not, I can't find anything other than this article but it seem uses Javascript.
I would like to make the controls bar fit the video width; as you can see from the image attached, the controls bar excedes the video width.
HTML for the above image
<div class="video centered-content">
<a class="circle-canvas close-video" href="javascript:void(0)" id="video-close" rel="tooltipTOP" data-original-title="close">X</a>
<video width="63%" height="60%" id="video" class="video" controls>
<source src="<?php echo base_static_url();?>media/video.mp4">
<source src="<?php echo base_static_url();?>media/video.ogv">
<source src="<?php echo base_static_url();?>media/video.webm">
</video>
</a>
</div>
Here is a good example for styling native player controls(just tested in Chrome): https://codepen.io/BainjaminLafalize/pen/GiJwn
To change the width of the player controls bar:
video::-webkit-media-controls-panel {
width: 40px;
}
You can style native controls in some browsers, using shadow DOM. Enable shadow dom in debug inspector settings:
http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/
HTML5 Video Controls - make larger?
You could style the shadow DOM, but you need to look at every browser individually and a browser update could destroy your styling.
I recommend taking a look at MediaElement.js which gives you cross-browser controls that can be styled using CSS and are already accessibility-optimized.
Or if you only need a few controls anyway, build your own: https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Video_player_styling_basics