How do I use multiple images which are different in resolutions.. But I want to use all in a perticular size without stretching and make everything responsive..
* {
margin: 0;
padding: 0;
border: none;
outline: none;
}
body {
width: 80%;
margin: 0 auto;
}
.imags img {
width: 45%;
margin: 1%;
}
<section class="imags">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg" alt="wall">
<img src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&h=350" alt="wall">
<img src="https://images.pexels.com/photos/236047/pexels-photo-236047.jpeg?auto=compress&cs=tinysrgb&h=350" alt="wall">
<img src="https://www.nature.com/polopoly_fs/7.44180.1495028629!/image/WEB_GettyImages-494098244.jpg_gen/derivatives/landscape_630/WEB_GettyImages-494098244.jpg" alt="wall">
<img src="https://assets.uuworld.org/sites/live-new.uuworld.org/files/styles/scaled_960_wide_no_upscale/public/istock-678573106-smaller.jpg?itok=sDKAwLhI×tamp=1523631303" alt="wall">
</section>
Consider this example...
You can use this code
HTML
<div class="block">
<img class="responsive-img" src="image1.jpg" alt="image"></img>
</div>
<div class="block">
<img class="responsive-img" src="image2.jpg" alt="image"></img>
</div>
CSS
.block {
width: 500px;
}
.responsive-img {
width: 100%;
height: auto;
}
//If the screen size is less than 480px, the image width will be the width of the screen
#media screen and (min-width: 480px) {
.block {width: 100%}
}
Here each images will adjust in 500px width and the height will varies as their height to width ratio.
Or you can use Bootstrap 4, a CSS framework which have predefined classes for the same.
<div class="col-*-*">
<img class="img-fluid" src="image1.jpg" alt="image"></img>
</div>
<div class="col-*-*">
<img class="img-fluid" src="image2.jpg" alt="image"></img>
</div>
Here img-fluid is the class to get the responsive image in Bootstrap 4. In Bootstrap 3, the class img-responsive
If you want to fix the height also, then
.block {
width: 500px;
height: 500px;
overflow: hidden;
}
.responsive-img {
min-width: 100%;
min-height: 100%;
}
The CSS code above will allow the images to adjust in 500px*500px box without stretching. In the result if the image width is greater than height, the height will be 500px and the width will be more than 500px, but the extra part will be hidden, vice-versa for if the height is greater than width.
Hope my answer meet to your query.
https://codepen.io/sawacrow/pen/zYWvzQR
aspect-ratio: 2/2;
object-fit: contain; or object-fit:cover;
Related
Let's suppose I have the following code:
img {
max-widht: 100%;
max-height: 100%;
}
<div width="500" height="500">
<img src="https://placehold.it/250x150">
</div>
This works fine for all images if with width or height higher than 500px.
But with smaller images, the image will not cover the div.
Is there a CSS way to force the image to be a least width: 100% or height: 100% regardless its original size ?
EDIT :
This solution by disinfor worked for me.
img {
width: 100%;
height: 100%;
object-fit: contain;
}
Do this:
img {
width: 100%;
height: auto;
}
The reason smaller images (in your case, smaller than 500px wide) don't fill the whole space, is because max-width means "max width of the actual image." So if you use width: 100% instead, the image will fill the space of its container.
Using height: auto will ensure the image doesn't get stretched/distort vertically.
Proof of concept:
.normal, .land, .port, .fit {
height: 200px;
width: 200px;
}
img {
width: 100%;
height: auto;
}
div.land img,
div.port img {
width: 100%;
height: 100%;
}
div.fit img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="fit">
<img src="https://placehold.it/500x750">
</div>
<div class="fit">
<img src="https://placehold.it/50x100">
</div>
<div class="normal">
<img src="https://placehold.it/75x10">
</div>
<div class="normal">
<img src="https://placehold.it/10x75">
</div>
<div class="land">
<img src="https://placehold.it/75x10">
</div>
<div class="port">
<img src="https://placehold.it/10x75">
</div>
img {
max-width: 100%;
object-fit: cover;
}
<div width="500" height="500">
<img src="https://placehold.it/250/150">
</div>
I think that you answered to your own question!
You have a Div! => width:500px and height: 500px!
when an image is larger than this size, Max-width and max-height can work correctly!
but when your image is smaller, max-width can't help you, because image width is smaller than 500px!
for example you have an Image => width:300px. max-width:100% is equal to 300px!
then you can change your code like this:
<div>
<img src="#" alt="Alternate Text" style="width:500px;height:500px;" />
</div>
but if you want a responsive Image:
<div style="width:500px;height:500px;">
<img src="#" alt="Alternate Text" style="width:500px;height:auto;" />
</div>
You can use background-size CSS rule if you put your image to background:
css
.block {
background: url(my_picture.png) no-repeat 50% 50%;
background-size: cover;
}
html
<div width="500" height="500" class="block"></div>
I'm trying to place links on images in one row so that different images have different links. I'm also having this div to shrink to fit certain media screen sizes. However, the images didn't resize according to the wrapper requirements. Please help.
Here's the HTML:
.box {
width: 100%;
float: left;
margin: 0;
padding: 0;
position: relative;
}
#media screen and (min-width: 768px) and (max-width: 1024px) {
body {
text-align: center;
background: url(image/bg.png) center top;
}
#wrapper {
width: 768px;
margin: 0 auto;
background-color: #fff;
}
}
#media screen and (min-width: 1024px) {
body {
text-align: center;
background: url(image/bg.png) center top;
}
#wrapper {
width: 500px;
margin: 0 auto;
background-color: #fff;
}
<div id="wrapper">
<div class="box">
<img src="image/pea.jpg">
</div>
<div class="box">
<img src="image/pea_01.jpg">
<img src="image/pea_02.jpg">
<img src="image/pea_03.jpg">
<img src="image/pea_04.jpg">
<img src="image/pea_05.jpg">
</div>
<!-- main issue here -->
<div class="box">
<img src="image/pea_footer.jpg">
</div>
</div>
Here's a screenshot of the line up (desktop). Mobile seems to look ok after adding display:inline-block;
width:auto; to .box:
I reckon remove any static widths because you only need to detect when the viewport is a certain size and then change the img width then, as I have done here. I set each image to display block to remove any margin or padding around them. You might prefer to not do this, but I like setting this as default.
This way you can pick different breakpoints that suit you rather than setting static widths at each breakpoint. This is the beauty of responsive development. Stay flexible rather than controlling what happens to containing divs; let the content run things. Run this snippet below in Full Screen mode to see the full desktop styling (each img goes to 20% instead of 50%):
.box {
width: 100%;
float: left;
margin: 0;
padding: 0;
position: relative;
}
img {
display: block;
width: 20%;
float: left;
}
#media screen and (max-width: 767px) {
img {
width: 50%;
}
}
<div id="wrapper">
<div class="box">
<img src="http://placehold.it/100x100">
</div>
<div class="box">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
</div>
<!-- main issue here -->
<div class="box">
<img src="http://placehold.it/100x100">
</div>
</div>
Your .box could be in display:flex
.box {
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
}
Keep in mind that your 5 <img> should be the icons, not containing your background (the clouds).
And I think the following code would be correct for your images:
.box img {
max-width: 20%;
}
I think it's better to not apply an explicit width or height to the image tag.
Please try:
max-width:100%;
max-height:100%;
Just use percentage based layouts rather than pixels or other measurements.
For example:
<img width="50%">: that will fill half of the containing element, at any size
<img width="500px">: that will always fill exactly 500 pixels, if it's too big or if it's too small.
I want to create the following layout :
Is a stripe of a variable number of images that have various widths and heights, that are:
proportional
scaled at the same height;
and the sum of their widths are equal to the parent width.
***It's kind of complicated to express myself;
I was wondering if it's possible for a block to simulate the img neat proportion behavior when you set a width to a percentage and it calculates the height of it automagically.
I've made up a diagram that maybe explain better what I want to achieve :
I want for the image to have collectively 100% width of the parent element, scaled with at the same height without loosing their proportion.
I've tried various implementations trying to figure out a way in which I can translate compute a percentage height in css that fills all the width for a block, just how the image behaves when there are {width: 100%; height : auto} properties.
So here is what I've got so far :
Strike #1, tried a simple solution
Problem: container height must be predefined.
.container {
width : 100%;
border: 1px solid black;
height: 50px; /* I would like to say here auto */
}
.image-wrapper {
white-space: nowrap;
height: 100%;
max-width: 100%;
border: 1px dashed gray;
}
.image {
height: 100%;
width: auto;
}
<div class="container">
<div class="image-wrapper">
<img class="image" src="http://placehold.it/100x200" />
<img class="image" src="http://placehold.it/300x200" />
<img class="image" src="http://placehold.it/800x400" />
<img class="image" src="http://placehold.it/10x80" />
<img class="image" src="http://placehold.it/800x400" />
</div>
</div>
Strike #2, display: table anyone ?
Problem: Don't even need to mention it, images are cropped the container size doesn't follow its parent size .
.container-wrapper {
width: 40px;
height: 50px;
}
.container {
width : 100%;
border: 1px solid black;
display: table;
height: 100%;
}
.image-wrapper {
display: table-row;
height: 100%;
border: 1px dashed gray;
}
.item {
display: table-cell;
border: 1px solid blue;
width: 100%;
height: auto;
}
.image {
height: 100%;
width: auto;
}
<div class="container-wrapper">
<div class="container">
<div class="image-wrapper">
<div class="item">
<img class="image" src="http://placehold.it/100x200" />
</div>
<div class="item">
<img class="image" src="http://placehold.it/300x200" />
</div>
<div class="item">
<img class="image" src="http://placehold.it/800x400" />
</div>
<div class="item">
<img class="image" src="http://placehold.it/10x80" />
</div>
<div class="item">
<img class="image" src="http://placehold.it/800x400" />
</div>
</div>
</div>
</div>
***I must say that I am looking for a HTML/CSS solution without the involvement of JavaScript code.
Do you have a clue on how can I approach this ?
So a trick I just came up with is to use the automagic scaling of an image to scale the containing filmstrip div, but hide it with opacity (in a real example, I'd use a transparent .png as well). This sets the height of the filmstrip relative to its width. If you want your filmstrip to be 5:4 or 16:9 or whatever, just change the proportions of the .magic image.
The container inside is then set to be absolutely positioned so it inherits the size of the .magic image.
The images themselves are set to take up the full height of the filmstrip, and are given different widths. The actual image is set with background-image which uses background-size: cover and background-position: center to fill the div.
.filmstrip {
width: 100%;
position: relative;
/* just to make it easier to see what's going on */
border: 1px solid red;
}
.magic {
width: 100%;
height: auto;
display: block;
/* we don't actually want to see this, we're just using it for it's ratio */
opacity: 0;
}
.contents {
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
}
.contents .image {
height: 100%;
background-size: cover;
background-position: center;
float: left;
margin-right: 2%;
/* just to make it easier to see what's going on */
border: 1px solid blue;
box-sizing: border-box;
}
.contents .wide {
width: 30%;
}
.contents .narrow {
width: 10%
}
<div class="filmstrip">
<img class="magic" src="http://placehold.it/400x100" />
<div class="contents">
<div class="wide image" style="background-image: url('http://placehold.it/300x100');"></div>
<div class="narrow image" style="background-image: url('http://placehold.it/300x100');"></div>
<div class="wide image" style="background-image: url('http://placehold.it/300x100');"></div>
</div>
</div>
Browser support should be: Chrome 3+, Firefox 3.6+, IE 9+, Opera 10+, Safari 4.1+ which is basically because of the use of background-cover.
Have a look at my stackoverflow 33117027 answer in which I made suggestions about creating a filmstrip. It has a reference to an eleborate Codepen example. You can easily strip/add what you need...
https://jsfiddle.net/3atxd4uL/
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-10 col-md-offset-1 col-lg-10 col-lg-offset-1" id="innerdiv3_div">
<img class="img-responsive" src="http://upload.wikimedia.org/wikipedia/commons/0/0d/Ski_trail_rating_symbol-blue_square.svg" alt="">
<img class="img-responsive" src="http://upload.wikimedia.org/wikipedia/commons/0/0d/Ski_trail_rating_symbol-blue_square.svg" alt="">
<img class="img-responsive" src="http://upload.wikimedia.org/wikipedia/commons/0/0d/Ski_trail_rating_symbol-blue_square.svg" alt="">
<img class="img-responsive" src="http://upload.wikimedia.org/wikipedia/commons/0/0d/Ski_trail_rating_symbol-blue_square.svg" alt="">
<img class="img-responsive" src="http://upload.wikimedia.org/wikipedia/commons/0/0d/Ski_trail_rating_symbol-blue_square.svg" alt="">
</div>
I am trying to create a responsive page. But in this case, when I am resizing the window, the images float out of the container div instead of expanding the containing div.
Thanks in advance.
I think this is what you looking for:
WORKING:DEMO
1) The problem was the div #innerdiv3 must be given the height:auto so it could adjust its height when the screen resolution reduces.
2) When you accomplish above you will find that not all img would get on same row, i.e. some goes down(but remains in same div), so now for div #innerdiv3_div img i have alter the max-height = 10% & max-width = 10%;
3) Now just final touch by giving margin-bottom:20px(just random px's you change as you want) to both div's i.e. #innerdiv3_div and #innerdiv3_div img to leave some space from bottom
CSS
#innerdiv3{
min-height: 100px;
width: 100%;
background-color: ghostwhite;
height: auto;
margin: 0 auto;
margin-bottom:20px;
}
#innerdiv3_div img{
display: inline-block;
margin-left: auto;
margin-right: auto;
margin-bottom:20px;
max-height: 10%;
max-width: 10%;
margin-top: 10px;
margin-left: 20px;
}
You are setting an explicit height on #innerdiv3.
If you want the number of images in each row to adjust to the width of the viewport, and for the images to always take 100% of the full width media queries is your friend.
https://jsfiddle.net/3atxd4uL/10/
Style each img to float: left and set a default width of 100% (for the smallest viewport). Then, for each larger breakpoint, style your images to take a gradually smaller fraction of the width (1/2, 1/3, 1/4...):
#media (min-width: 200px) {
#innerdiv3_div img{
width: 50%;
}
}
#media (min-width: 400px) {
#innerdiv3_div img{
width: 33.333%;
}
}
#media (min-width: 600px) {
#innerdiv3_div img{
width: 25%;
}
}
I'm making a website for my course in webdesign and one criteria is for it to be responsive (resize content to fit screen size).
So in my site as it is every image and text paragraph size according to screen sizes from full HD to iPhone size.. except for my header image which just stays locked in its place when I scale it down, so when it's down to mobile resolution I have to scroll to the right to see my image.
Here's my HTML and CSS codes for the header image:
HTML:
<div class="container_14">
<div class="grid_12">
<a href="index.html">
<p align="center"><img src="images/logo2.png"></p>
</a>
</div>
</div>
CSS:
.container_14 {
margin-left: auto;
margin-right: auto;
width: 1200px;
}
.container_14 .grid_12 {
width:97.5%;
height:90px;
}
img {
max-width: 100%;
}
Link to my code with a random same size images.. http://jsfiddle.net/hac4cfrn/
If you want it to be responsive and centered, you should set the .container_14 with to 100%, not hardcode it in pixels:
.container_14 {
margin-left: auto;
margin-right: auto;
width: 100%;
}
<div class="container_14">
<div class="grid_12">
<a href="index.html">
<p align="center"><img src="http://www.tscross.com/sitemap_files/sitemap_banner.png"></p>
</a>
</div>
</div>
If you want the .container_14 to adapt to various screens but stay at 1200px width if there’s enough space, then use a #media query:
.container_14 {
margin-left: auto;
margin-right: auto;
width: 1200px;
}
#media screen and (max-width:1200px){
.container_14 {
width: 100%;
}
}
.container_14 .grid_12 {
width:97.5%;
height:90px;
}
img {
max-width: 100%;
}
<header>
<div class="container_14">
<div class="grid_12">
<a href="index.html">
<p align="center"><img src="http://www.tscross.com/sitemap_files/sitemap_banner.png"> </p>
</a>
</div>
</div>
</header>
You can also add a second #media query for the image inside. It’s also possible without the container.
Otherwise you could just use 100% as a width.