I have 2 divs and I wanted to resize images inside in those divs but they should allways fill div and constrain proportions.
Like this one:
http://www-07.ibm.com/sg/60/
If you try to resize them, they will allways fill their divs and images will allways keep their proportions.
HTML:
<div class="one">
<img src="imgs/photo1.jpg" class="photo1">
</div>
<div class="two">
<img src="imgs/photo2.jpg" class="photo2">
</div>
CSS:
.one{
float:left;
width:50%;
height:50%;
position:relative;
overflow:hidden;
}
.two{
position:relative;
overflow:hidden;
width:50%;
height:50%;
float:left;
}
How do I style those images to look like this?
http://www-07.ibm.com/sg/60/
Site is using jquery plugin for the effect, however you can get the same by css3 background-size:cover property.
What you have to do is :
Remove source image and give it through background and use background-size:cover.
<div class="one">
</div>
.one{
float:left;
width:50%;
height:50%;
position:relative;
overflow:hidden;
background: url("path to image") no-repeat center center;
background-size : cover;
}
I could be missing something here, but if I understand your question correctly, you can just add:
width: 100%;
to your img tags and they will always fill the containing div.
Try this,
.one img, .two img {
width:100%;
height:auto;
}
I think you would get the best result by not using the tag, but instead make these background images with the attribute:
background-size:cover;
background-position:center;
Related
I'm just looking for some advice on my approach to cloning a website. To improve my CSS skills, I've found a website that I'm basically trying to copy in order to get used to CSS syntax ect.
For the divs inside the wrapper, I'm given widths of 100% for them all, and a total height of wrapper 100vh. Between all the divs I've tried to 'approximate' what the height for each div would be - meaning I'm doing it manually. It looked well and good until I added an image (taken from the website) and inserted it into the div image. This resulted in only a portion of the image showing within the div, clearly my height approximation wasn't right. Meaning I had to give it more height, and the others divs less height to make it work. Clearly this isn't a great approach and was hoping for someone to suggest a better way.
<div id = "wrapper">
<div id = "header">
</div>
<div id = "navigation">
</div>
<div id = "image">
</div>
<div id = "repairs">
</div>
<div id = "whitespace">
</div>
<div id = "footer">
</div>
</div>
CSS
#wrapper{
width:100%;
height:100vh;
background-color: black;
margin:0;
padding:0;
}
#header{
width:100%;
height:4vh;
background-color: #ededed;
}
#navigation{
width:100%;
height:16vh;
background-color:white;
}
#image {
width:100%;
height:30vh;
background-image:url("image.png");
}
#repairs {
width:100%;
height:20vh;
background-color:green;
}
#whitespace{
width:100%;
height:20vh;
background-color:purple;
}
#footer{
width:100%;
height:10vh;
background-color:blue;
}
height: auto;
Simply add this css
You can add background-size:contain to the list of #image properties to make the background image fit completely inside the container, or use background-size:cover to make it completely cover the container.
If you use contain, you may also want to use something like background-position: center center to position it in the middle of the div.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
I know this sounds too simple but I am unable to place one div below the other div , and my code is
html:
<div id="gamediv"></div>
<div class="style"></div>
css:
.style {
width:728px;
height:90px;
margin-left:auto;
margin-right:auto;
}
After doing some ugly hack in my css & in my first div style i am able to place my desired div below first div , this is my css code:
.style{
width:728px;
height:90px;
margin-left:auto;
margin-right:auto;
position:absolute;
bottom:0px;
left:323px;
}
first div style property: <div id="gamediv" style="position:relative;"></div>
for now this solution is working but still i can't figure out why previous solutions didn't worked, any explanation regarding this is appreciated!!
This is beacuses your div will be displayed befault in line.
It will take all the space it has to dispay divs.
something you can do is to create another div to include the 2 you create and specifying a specific width:
<div id="container">
<div id="gamediv"></div>
<div class="style"></div>
</div>
Then add your style such as
#container{
width: 800px;
height: 200px;
}
.gamediv{
width:750px;
height:40px;
}
.style {
width:728px;
height:90px;
margin-left:auto;
margin-right:auto;
}
then you may want to align with float or centre with margin:auto; Try to to imagine div as boxes. if it help you may add
border:1px solid black;
this will draw the box and you will see what you are doing
add display: block; also in the stylesheet (for both div)
I'm having trouble getting margins to work on an image. I have an image, and it has the following CSS:
#logoRedrum{
position:relative;
width:50px;
margin-top:auto;
margin-right:0;
margin-bottom:auto;
margin-left:0;
}
The HTML for the image is as follows:
<img id="logoRedrum" src="resources/img/logoRedrum.png">
What I'm trying to do with this is to have my image centered at all times. Instead of having it centered, it is doing this:
The red backwards "R" with the blue outline is my image. I have googled several times what might be causing the image to stay on the left, but to no avail.
All help greatly appreciated!
Add display:block; to img
#logoRedrum{
position:relative;
width:50px;
display:block;
margin:0 auto
}
DEMO
If you need to center the image in the main parent its easy, do it like this
//HTML
<div class="centered-content"> <img class="no-margin" src=""/> </div>
//CSS
.contered-content {
text-align:center;
}
.no-margin{
margin:0 auto;
}
I'm trying to make a website using html and css.
I have put 5 divs next to each other and there width and height depends on the size of the window. Then I have put images in each of those divs. the size of those pictures also depends on the size of the window.
The problem that I'm having is that only a part of my image is shown in the div.
The code:
<div id="cotainer">
<div id="bar1"><img src="modern_combat_1.jpg"></div>
<div id="bar2"><img src="modern_combat_2.jpg"></div>
<div id="bar3"><img src="modern_combat_3.jpg"></div>
<div id="bar4"><img src="modern_combat_4.jpg"></div>
<div id="bar5"><img src="modern_combat_5.jpg"></div></div>
this is the style:
html, body{margin:0;padding: 0;border:0;}
#bar1 {top:35%;width:20%;bottom:35%;background-color:red;position:absolute;}
#bar2 {top:35%;left:20%;right:0;bottom:35%;background-color:green;position:absolute;}
#bar3 {top:35%;left:40%;right:0;bottom:35%;background-color:yellow;position:absolute;}
#bar4 {top:35%;left:60%;right:0;bottom:35%;background-color:red;position:absolute;}
#bar5 {top:35%;left:80%;right:0;bottom:35%;background-color:green;position:absolute;}
#bar1 img{
width:100%;
height:100%;
}
#bar2 img{
width:100%;
height:100%;
}
#bar3 img{
width:100%;
height:100%;
}
#bar4 img{
width:100%;
height:100%;
}
#bar5 img{
width:100%;
height:100%;
}
Tthe result is that the 3 pictures in the middle aren't completely shown in the divs
can someone help me so that the 3 pictures in the middle are shown completely
You have giver width to #bar1 div only.
Give width to the rest of divs also.
Write:
#bar1,#bar2,#bar3,#bar4,#bar5{width:20%;}
Fiddle here.
Also try using max-width:100% for images;
I have a div which size may differ time to time.
At I set a background image to tat div which image size is fixed.
But I need to fit the background image to div at any size.
How could be possible thro' CSS.
Thanks in advance!!!
The only way to change a size of an image with CSS is when it's an <img> element.
I mean that you can do something like that:
img#myBG { width:200px; height:100px; }
If you need it to be a background, you should use 'z-index' and put your img under a the element that holds the content.
Something like this:
<div id="holder">
<img id="myBG" src="...." />
<div>my content here</div>
</div>
<style>
#holder { position:relative; width:200px; height:100px; }
#holder div { position:absolute; top:0; left:0; z-index:2; }
img#myBG { width:200px; height:100px; { position:absolute; top:0; left:0; z-index:1; }
</style>
It's not possible with CSS 2.x that's available in most browsers, but CSS 3 has introduced the background-size property. You can read details here: http://www.css3.info/preview/background-size/