and
having trouble on small screens
please help me
kindy provide the answer so i can learn here
Image size confusion
- Thread starter OBXKH
- Start date
and
having trouble on small screens
please help me
kindy provide the answer so i can learn here
- Joined
- Jul 4, 2023
- Messages
- 478
- Reaction score
- 60
Don't use fixed sizes for images (<img>) if you want to have more responsive images.
Try like this:
another way is put the image as a background for element <div>
Try like this:
Full demo: on-line.
Try like this:
CSS:
img {
display: block;
height: 100%;
width: 100%;
object-fit: cover;
}another way is put the image as a background for element <div>
Try like this:
CSS:
div {
width: 100%;
aspect-ratio: 1;
background-image: url('https://picsum.photos/1200/800?random=1');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}Full demo: on-line.
Last edited:
- Joined
- Jul 4, 2023
- Messages
- 478
- Reaction score
- 60
Don't use fixed sizes for images (<img>) if you want to have more responsive images.
Try like this:
another way is put the image as a background for element <div>
Try like this:
Full demo:
Try like this:
CSS:
img {
display: block;
height: 100%;
width: 100%;
object-fit: cover;
}another way is put the image as a background for element <div>
Try like this:
CSS:
div {
width: 100%;
aspect-ratio: 1;
background-image: url('url to your image');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}Full demo:
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100%;
aspect-ratio: 1;
background-image: url('url to your image');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.gallery {
display: flex;
flex-wrap: wrap;
border: none;
height: auto;
margin-top: 2rem;
}
.gallery img {
width: 20%;
flex: 1 0 20vh;
object-fit: cover;
display: block;
max-width: 100%;
margin: .5rem;
border-radius: .25rem;
}
</style>
</head>
<body>
<div></div>
<section class="gallery">
<img src="url to your image" />
<img src="url to your image" />
<img src="url to your image" />
<img src="url to your image" />
</section>
</body>
</html>