i have a site that has a grid of images in the center,when i see it on my 1920*1080 desktop the images are properly spaced and it works great, but when seeing it on lower resolution (or if the user resizes the window) the images move and ruin the layout of the site. I need a way to scale the images when the site is displayed in lower resolution computers or the window is smaller.
<div class="imagenes" style="padding: 2px 0px 20px;">
<div class="row imagenes" style="display: inline">
<div class="col-sm-3" style= "height: 320px; width: 480px; margin-left:165px; box-shadow: 10px 10px 5px #888888;">
<img src="images/inscrib1.jpg"/>
</div>
<div class="col-sm-3" style= "height: 320px; width: 480px; margin-left: 25px; margin-right: auto; box-shadow: 10px 10px 5px #888888;">
<img src="images/inscrib2.jpg"/>
</div>
<div class="col-sm-3" style= "height: 320px; width: 480px; margin-left: 25px; margin-right: 165px; box-shadow: 10px 10px 5px #888888;">
<img src="images/inscrib3.jpg"/>
</div>
</div>
can anyone help me?
As per the Bootstrap docs: http://getbootstrap.com/css/#images
add the "img-responsive" class to the images.
<img class="img-responsive" src="..." />
Use media queries :
#media screen and (max-width : **the_size_you_want**px) {
.col-sm-3 {
width: **idem**px;
height: **idem**px;
}
.col-sm-3 img {
max-width: 100%;
height: auto;
}
}
Related
How to resize images on my presentation website depending on different screen resolutions? For example, on a resolution like 2560x1440 the width of the images is too big. I want it to go from 28% to 20% because that's how i think it will look better. But only for that screen resolution, in other screen resolutions like 1280x720 it's ok.
This is an image of what i'm saying, with the 28% width: https://imgur.com/OPUbdWz
And this is how i want to transform it, with 20% width on that specific screen resolution: https://imgur.com/iXLAe8l
This is my trying in CSS, but not working:
#media (max-width: 2000px){
.amenajari_interioare_css{
width: 20%;
}
}
And this is my HTML and CSS code:
HTML:
<section id="showcase">
<div class="container">
<h1>LOCUINȚE</h1>
<div class="amenajari_interioare_css">
<img src="../img/locuinta1.jpg" alt="" />
</div>
<div class="amenajari_interioare_css">
<img src="../img/locuinta2.jpg" alt="" />
</div>
<div class="amenajari_interioare_css">
<img src="../img/locuinta3.jpg" alt="" />
</div>
<div class="amenajari_interioare_css">
<img src="../img/locuinta4.jpg" alt="" />
</div>
<div class="amenajari_interioare_css">
<img src="../img/locuinta5.jpg" alt="" />
</div>
<div class="amenajari_interioare_css">
<img src="../img/locuinta6.jpg" alt="" />
</div>
</section>
CSS:
.amenajari_interioare_css{
min-width: 350px;
width: 28%;
height: 300px;
display: inline-block;
margin: 8px;
position: relative;
}
.amenajari_interioare_css img{
margin-top: 5px;
margin-bottom: 1px;
width: 100%;
height: 100%;
border: 1px solid black;
border-radius: 16px;
}
You have a couple errors in your CSS - mainly the media query. It should be min-width, because you want the change to happen for screen sizes above 2000px.
#media (min-width: 2000px){
.amenajari_interioare_css {
width: 20%;
}
}
The other thing you should probably do is:
.amenajari_interioare_css img{
margin-top: 5px;
margin-bottom: 1px;
width: 100%;
height: auto;
border: 1px solid black;
border-radius: 16px;
}
Set the height to auto or in the event you don't have a perfectly square image, otherwise that image will get stretched.
How to center profile image depending of screen size using bootstrap?
Here what I have done so far:
html:
<div class="col-md-12">
<div class="col-md-2 col-xs-12">
<div class="deck">
<img src="https://image.tmdb.org/t/p/w220_and_h330_bestv2/kXlrGioGfFKOvibpsPzzGx16cP2.jpg" alt="list image" width="160">
</div>
<div class="title-users-list-profile">
<img class="comments-author" src="http://t0.gstatic.com/images?q=tbn:ANd9GcS_9j6SU0VDO8PQtsal3pvO2Xrp4eu2IbOYQVjLUDtRNQmn6PIBqDw3B4o" alt="image picture"/>
</div>
</div>
</div>
CSS:
.deck{
display: flex;
}
.comments-author {
border-radius: 50%;
border: 6px solid #fff;
margin: 5px;
box-shadow: 0 0 0 5px rgba(0,0,0,.2);
}
.title-users-list-profile img{
position: relative;
width: 50px;
height: 50px;
top: -35px;
left:50px;
margin-top: 8px;
margin-bottom: -25px;
}
https://jsfiddle.net/tzc2gdcf/
You can use flex box to align image.
Check this guide : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
and using #media to specific rules to single media size
If you are only wanting to have the image center based the current dimension you could look at adding a media query. Will change css rules based on pixel width/etc. https://getbootstrap.com/docs/3.3/css/
I want create this.
What I have so far is this, but it is not responsive as screen size changes. It stays on specific width, that is why i am thinking to replace this with image
<div class="container-fluid">
<div class="betn-footer">
</div>
</div>
.betn-footer{
background-color:#f4f3f3;
height:50px;
text-align:center;
position:absolute;
border-bottom-left-radius:50%;
border-bottom-right-radius:50%;
margin-top:-20px;
margin-left:65px;
width:973.88px;
box-shadow: 0 21px 30px -10px #080808;
}
Tell me if there is any other option to do this. Thank you!
Just remove your fixed widths and margins:
.container-fluid { margin-bottom: 2em; }
.betn-footer {
background-color: #f4f3f3;
height: 50px;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
box-shadow: 0 21px 30px -10px #080808;
}
<div class="container-fluid" style="width:200px;">
<div class="betn-footer"></div>
</div>
<div class="container-fluid" style="width:500px;">
<div class="betn-footer"></div>
</div>
<div class="container-fluid" style="width:1000px;">
<div class="betn-footer"></div>
</div>
You should not use margin-left and instead center the footer / your content with margin: 0 auto. Then you can set your footer width to a flexible width via using %
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto }
...
<IMG class="displayed" src="..." alt="...">
it will always display a picture in the center of the page.
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 7 years ago.
I'm trying to create four gray squares that display in the middle of the browser.
Each square is set to be 40 pixels wide and have borders of 10 pixels.
I use the box_container class in a <div> to allow some CSS to center the four boxes.
If I set the width of the box_container class to 240px, only 3 boxes fit into the first row.
I need to set the width to 250px minimum to get all the four boxes to display in one row. Why is this when the eight borders of 10px and four img boxes of 40px adds up to 240px (10px*8 + 40px*40 = 240px)?
<style type="text/css">
.boxes {
height: 40px;
width: 40px;
background-color: gray;
margin: 10px 10px 10px 10px;
}
.box_container {
width: 250px;
margin: 0 auto;
}
</style>
<div class="box_container">
<img class="boxes"></img>
<img class="boxes"></img>
<img class="boxes"></img>
<img class="boxes"></img>
</div>
Your calculation does not exactly work out that way. There is whitespace between each <img> tag, and this possibly causes it to overflow out of the container.
You may remove this whitespace by making them float: left in your css.
The resulting code displays the four boxes in the same line:
<style type="text/css">
.boxes {
height: 40px;
width: 40px;
background-color: gray;
margin: 10px 10px 10px 10px;
float: left
}
.box_container {
width: 250px;
margin: 0 auto;
}
</style>
<div class="box_container">
<img class="boxes"></img>
<img class="boxes"></img>
<img class="boxes"></img>
<img class="boxes"></img>
</div>
Use float:left in .boxes class
.boxes {
height: 40px;
width: 40px;
background-color: gray;
margin: 10px 10px 10px 10px;
float: left;
}
.box_container {
width: 250px;
margin: 0 auto;
}
<div class="box_container">
<img class="boxes"></img>
<img class="boxes"></img>
<img class="boxes"></img>
<img class="boxes"></img>
</div>
It is because there are spaces between your image tags. There isn't a nice solution, but here are a few ways you can solve it:
Using no spaces:
<div class="box_container"><img class="boxes"><img class="boxes"><img class="boxes"><img class="boxes"></div>
Or using empty comments:
<div class="box_container"><!--
--><img class="boxes"><--
--><img class="boxes"><--
--><img class="boxes"><--
--><img class="boxes"><--
--></div>
Another option that might work in your case is to set the images to float:
.boxes {
height: 40px;
width: 40px;
background-color: gray;
margin: 10px 10px 10px 10px;
float: left
}
*Also, if you are not using xhtml, you should not have a closing </img> tag. I have removed them in the above examples as your tag says you are using html. Technically, I'm not 100% sure why you are using images in the first place since you just want grey boxes. I would recommend using divs displayed as an inline block like this:
.boxes {
height: 40px;
width: 40px;
background-color: gray;
margin: 10px 10px 10px 10px;
display: inline-block;
float: left
}
.box_container {
width: 250px;
margin: 0 auto;
}
<div class="box_container">
<div class="boxes"></div>
<div class="boxes"></div>
<div class="boxes"></div>
<div class="boxes"></div>
</div>
In shopping cart details page product image is defined using code below. Its proportions should preserved.
For bigger zoom levels image hides start of text after it.
How to render this page properly in all zoom levels?
For unknow reason div #productinfo starts at left side but it shoult start after image.
I tried to add display:inline-block to every div but this does not have any effect.
jquery, jquery ui, fancybox and pikachoose are used.
html:
<div style="float: left; width: 30%; margin-right: 1%">
<a href="#" class="details-picture">
<img src="/Thumb?product=1308318&size=198" alt="">
</a>
</div>
<div id="productinfo">
<div>
Price <span id="Price">
1.73
</span>
</div>
css:
.details-picture {
background: none repeat scroll 0 0 #FFFFFF;
border: thin ridge #BBBBBB;
display: block;
float: left;
height: 200px;
line-height: 200px;
margin: 0 20px 15px 0;
overflow: hidden;
position: relative;
text-align: center;
width: 198px;
}
.details-picture img {
border-width: 0;
height: auto;
max-height: 198px;
max-width: 198px;
vertical-align: middle;
width: auto;
}
This seems to be due to those inline attributes on the top-level div. The combination of float: left and width: 30% causes the issue you were experiencing.
<div class="productimage">
<a href="#" class="details-picture">
<img src="/Thumb?product=1308318&size=198" alt="" />
</a>
</div>
<div class="productinfo">
<div>
Price <span id="Price">1.73</span>
</div>
</div>
jsfiddle