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>
Related
I have two pictures: small and big youtube logo. I want my big youtube logo display when the width of my screen is more than 600px. And I want my small youtube logo display when the width of my screen is less than 600px.
!Also my big logo have to be on a half of the screen. But there's the problem. When I establish to my big logo some properties to make it behave this way, this logo stopes display at all.
Here's my code:
<picture>
<source srcset="https://i.postimg.cc/L5hRsX4B/youtube-logo-font.jpg" media="(min-width: 600px) 50vw">
<source srcset="https://i.postimg.cc/yN7Mddvg/Logo-youtube-ios-cropped.jpg">
<img src="https://i.postimg.cc/yN7Mddvg/Logo-youtube-ios-cropped.jpg" alt="photo-youtube">
</picture>
What did cause this bahaviour? And how can I fix this?
Thanks!
I got it! There is the thing that I mixed up with 2 attributes: media and sizes. They work differently. We should establish media attribute without desired width of element. For example:
media="(min-width:650px)"
And we can establish sizes attribute with the width of our element. For example:
sizes="(max-width: 320px) 280px"
And also this attribute can work like this. This example shows that we have to establish the desired width of our element in sizes attribute. It's necessary!
sizes="280px"
We can use media if we want to replace some pictures. And we can use sizes if we want our pictures responsive. There's no html property which can solve this problem. So, the best way is using CSS (or JS) aditionally.
It works fine directly set with css media query as followed:
Demo
#media only screen and (min-width: 600px){
picture{
width: 100vw;
}
img, source{
min-width: 50vw;
width: 50%;
}
}
<picture>
<source srcset="https://i.postimg.cc/L5hRsX4B/youtube-logo-font.jpg" media="(min-width: 600px) 50vw">
<source srcset="https://i.postimg.cc/yN7Mddvg/Logo-youtube-ios-cropped.jpg">
<img src="https://i.postimg.cc/yN7Mddvg/Logo-youtube-ios-cropped.jpg" alt="photo-youtube">
</picture>
for this project you should put media="max-width:600px" and run project.
<picture>
<source srcset="https://i.postimg.cc/L5hRsX4B/youtube-logo-font.jpg" media="(min-width: 600px) ">
<source srcset="https://i.postimg.cc/yN7Mddvg/Logo-youtube-ios-cropped.jpg" media="(max-width:600px)">
<img src="https://i.postimg.cc/yN7Mddvg/Logo-youtube-ios-cropped.jpg" alt="photo-youtube">
</picture>
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>
I've been struggling some hours trying to understand how the picture tag exactly works. I'm able to load different art directions at specific screen sizes using the <picture> tag in combination with <srcset> but I can't seem to find how I make these responsive.
I gave the <picture> element a class named .header-img. I tried to set media queries for the class and adjust the size of it. But when I try to set a width to .header-img, the width doesn't change.
Maybe an important detail, the <picture>element is inside a grid
<picture class="header-img">
<source media="(max-width: 500px)" srcset="./assets/img/header/header-bg-sm.png">
<source media="(max-width: 1100px)" srcset="./assets/img/header/header-bg-md.png">
<source media="(max-width: 1300px)" srcset="./assets/img/header/header-bg-lg.png">
<img src="./assets/img/header/header-bg-lg.png" alt="ISB header">
</picture>
Any help is really really appreciated !
Add this to your CSS:
.header-img img {
max-width: 100%;
}
And also, you have a container with property width of 70rem.
You should change the property width to max-width like so:
.container {
max-width: 70rem;
...
}
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 load a different inline image depending on the screen resolution (smaller resolution equals smaller image). At the minute I have this:
<img class="lazy" data-original="img1.jpg" src="img1.jpg" alt=""
height="638" width="1349">
In the past I've used background images and media queries. Is there a way to do this using inline images?
I think the best solution is this: but its still a working draft and has no (broad) support yet
<picture>
<source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x">
<source srcset="small.jpg 1x, small-hd.jpg 2x">
<img src="fallback.jpg" alt="">
</picture>
More about responsive images.
For now you might want to use the picturefill JavaScript:
<span data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
<span data-src="small.jpg"></span>
<span data-src="medium.jpg" data-media="(min-width: 400px)"></span>
<span data-src="large.jpg" data-media="(min-width: 800px)"></span>
<span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span>
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript>
<img src="small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
</noscript>
</span>
fine
remove images size in (img) tag and set image height n width in the class="lazy" in css file
and now for 2nd part image size depending on the screen resolution
you need to use media-query in css file
for example
#media (min-width:320px) { .lazy{height: 200px; width: 300px;} }
#media (min-width:481px) { .lazy{height: 250px; width: 350px;} }
now when this image open in small-phone/devices, image size will change to 200x300
and if this image open in tablets image size will change to 250x350
you can find more media size in internet
hope this solved your proble
have a nice day
#media and content can be used to acheive that
#media screen and (max-width: 600px) {
.lazy{
content:url(" // image url ");
}
}
Works on:
Chrome 14.0.835.163
Safari 4.0.5
Opera 10.6
Does not work on:
FireFox 27.0
IE 11.0