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%;
}
}
Related
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;
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 have three images on a row, if the total width of these three images doesn't fit the browser window then all three images should be below each other. So it's "all or nothing", there should never be only two images beside each other and one below (this happens then you gradually decrease browser window width using float:left; on all three images)
All this should be centered in the browser window, no matter the size of the window.
I know limited CSS and HTML but am using the following code to get current data centered in the window:
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
table {
vertical-align: middle;
height: 100%;
margin: 0 auto;
}
<table>
<tr>
<td>
<table width="280" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
"images and text"
</td>
</tr>
</table>
</td>
</tr>
</table>
You can use bootstrap to achieve that. Click on the Full page button and change the screen size.
#media (min-width:768px) {
.inline-block-row .col-sm-4 {
display: inline-block;
float:none;
}
}
<body>
<div class="container-fluid">
<h1>Inline Block Grid</h1>
<div class="row inline-block-row">
<div class="col-sm-4 col-md-3">
<div class="well"><img class="thumbnail img-responsive" src="http://placehold.it/200x200"></div>
</div>
<div class="col-sm-4 col-md-3">
<div class="well"><img class="thumbnail img-responsive" src="http://placehold.it/200x200"></div>
</div>
<div class="col-sm-4 col-md-3">
<div class="well"><img class="thumbnail img-responsive" src="http://placehold.it/200x200"></div>
</div>
</div>
</div>
</body>
You can use media queries (simple +pure css), but you need to set a breakpoint (unflexible):
img{display:inline;}
//replace 1024 with width of all three images
#media (max-width:1024px){
img{display:inline-block;}
}
Or you could use js (flexible+complicated):
<script>
body.onresize=function(){
var width=0;
images=document.getElementsByTagName("image");
for(image in images){
width=width+image.width;
}
if(width>window.innerWidth){
document.all.img.style.display="inline-block";
}
}
</script>
We can use pure CSS only to solve that problem, we'll use CSS media query. I'll try to explain the solution with help of an example. For that, first you should have with you the width of each image.
For example, let's say width of one image you want is 200px, then also you'd like to have some space as margin between images too, so let's say if browser width is more than 700px, then we'll have images on the same row, else, we'll have them one below the other. See the code below for one such implementation.
The HTML can be like this:
<div class="container">
<img src="img/one.jpg">
<img src="img/two.jpg">
<img src="img/tri.jpg">
</div>
The CSS code will be as below:
.container
{
width:100%;
text-align:center;
}
.container img
{
display:inline-block;
width:200px;
margin:15px;
}
/*Next block will be followed when browser width is less than 700px*/
#media screen and (max-width:700px)
{
.container img
{
display:block;
margin:auto;
width:100%; /*Use this line only if you want the image to occupy full width*/
}
}
If you know the width of the image you can add a #media query which changes both the width of the container and the flex-direction from row to column.
eg. Take an img which is contained in a div - and all the divs are collectively contained in a section.
If the image has a width of 240px, and a margin of 20px (on both sides) and the div containing the image has a 2px border (on both sides) and a 24px margin (on both sides), then...
a section containing three divs has a width of:
3 * (24px + 2px + 20px + 240px + 20px + 2px + 24px) = 996px
If you then style the body of your document so it has:
body {
margin: 12px;
padding: 0;
}
you'll know that the point at which the row of images has to turn into a column of images is when the width of the body is less than 12px + 996px + 12px - or 1020px.
Then you can set up your #media query:
#media only screen and (max-width: 1020px) {
.set {
flex-direction: column;
width: 332px;
}
}
Full example:
body {
margin: 12px;
padding: 0;
}
.set {
display: flex;
flex-direction: row;
width: 996px;
margin: 0 auto;
background-color: rgb(227,227,227);
}
.set-item, .set-item-image {
display: block;
}
.set-item {
width: 280px;
height: 320px;
margin: 24px;
background-color: rgb(255,255,255);
border: 2px solid rgb(191,191,191);
}
.set-item-image {
width: 240px;
height: 240px;
margin: 20px 20px 8px;
background-color: rgb(191,191,191);
}
.set-item-text {
margin: 0;
padding: 0;
text-align: center;
}
#media only screen and (max-width: 1020px) {
.set {
flex-direction: column;
width: 332px;
}
}
<section class="set">
<div class="set-item">
<img class="set-item-image" alt="Image 1" />
<p class="set-item-text">Image 1</p>
</div>
<div class="set-item">
<img class="set-item-image" alt="Image 2" />
<p class="set-item-text">Image 2</p>
</div>
<div class="set-item">
<img class="set-item-image" alt="Image 3" />
<p class="set-item-text">Image 3</p>
</div>
</section>
JSFIDDLE is here.
I have spans inside div which will split into 3 vertically align row. It works normally in high resolution browser but when I resize browser it colaps. You can resize jsfiddle window and u'll see what am I saying.
How can I solve that?
<div class="postPrevContent cal">
<span>იანვარი</span>
<span>თებერვალი</span>
<span>მარტი</span>
<span>აპრილი</span>
<span>მაისი</span>
<span>ივნისი</span>
<span>ივლისი</span>
<span>აგვისტო</span>
<span>სექტემბერი</span>
<span>ოქტომბერი</span>
<span>ნოემბერი</span>
<span>დეკემბერი</span>
</div>
Add a
min-width:100px
in your .cal span css class
You could use media queries in your CSS, this will make it into 2 columns instead of 3 when the page is below a 500px wide:
#media (max-width: 500px){
.cal span {
width: 50%;
}
}
http://jsfiddle.net/hqu6t0en/1/
you can then so the same again for a wide of 250px and make width 100% to make one column when even smaller. Or apply a minimum width to .col to stop it getting below 250px but keep 2 columns
#media (max-width: 250px){
.cal span {
width: 100%;
}
}
Or
.cal {
margin: 10px 0;
min-width: 250px;
}
change span to div, style float left and width in percent (of corse in *.css and class is beather), set min-width of parent div. 150 if you think text is max 50px width.
<div style="min-width: 150px; max-width: 800px;">
<div style=" width: 33%;float: left;">AAAAAAAA</div>
<div style=" width: 33%;float: left;">BBBBBBBB</div>
<div style=" width: 33%;float: left;">CCCCCCCCC</div>
<div style=" width: 33%;float: left;">AAAAAAAAAA</div>
<div style=" width: 33%;float: left;">BBBBBBBBBBBBB</div>
<div style=" width: 33%;float: left;">CCCCCCCCCCCC</div>
</div>
PS. Set max-width for big display. Set centre text in div.
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.