CODEWITHSUNDEEP
htmlcss
WESTKINz
WESTKINz

Reputation: 257

trying to use container for image but want to resize the image depeding on screen resolution

OK i got the container bit working but there is an issue i want the image to resize it self depending on the screen resolution so it doesn't look weird.

enter image description here

this is my code so far

index.html

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="CSS/main.css">
</head>
<body>
<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>
<div class="main_image"></div>
<div class="image123">
    <div class="imgContainer">
        <img src="Image/test_image_slot.jpg"/>
        <p>This is image 1</p>
    </div>
    <div class="imgContainer">
        <img src="Image/test_image_slot.jpg"/>
        <p>This is image 2</p>
    </div>
    <div class="imgContainer">
         <img src="Image/test_image_slot.jpg"/>
        <p>This is image 3</p>
    </div>
    <div class="imgContainer">
         <img src="Image/test_image_slot.jpg"/>
        <p>This is image 4</p>
    </div>
</div>
</body>
</html>

main.css

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #360836;
    text-align:center;
}

li {
    display:inline;
}

li a {
    display: inline-block;
    color: #d14977;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
}

li a:hover {
    color: white;
}

div.main_image { 
content:url(../Image/everest.jpg);
    max-width: 100%;
    height: auto;
    width: auto\9;
}

.imgContainer{
    float:left;
}

what can i do to make the image resize it self or may be I'm asking the wrong type of question i just want to make the 4 image in one row and auto resize the image depending on screen resolution without using javascript just html and css.

Upvotes: 0

Views: 59

Answers (4)

szymeo
szymeo

Reputation: 431

Try

.imgContainer {
    width:25%;
    height: auto;
}
.imgContainer img {
    width:100%;
    height: auto;
}

Anyway, get in touch with BOOTSTRAP - it's VERY helpful. When you need to scale images in bootstrap you just simply add - for example - class col-lg-3 (12/4=3), to put 4 images in a row - think about it buddy ;-)

Upvotes: 1

Rolf Rodrigo Krueger
Rolf Rodrigo Krueger

Reputation: 66

Using "display: table" combined with "display: table-cell" you solved your problem.

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            background-color: #360836;
            text-align: center;
        }
        li {
            display: inline;
        }
        li a {
            display: inline-block;
            color: #d14977;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            -o-transition: .5s;
            -moz-transition: .5s;
            -webkit-transition: .5s;
            transition: .5s;
        }
        li a:hover {
            color: white;
        }
        .main_image {
            width: 100%;
            min-height: 50px;
            background-color: #ccc;
        }
        .imgContainer {
            display: table-cell; /*IE8+ and non-IE */
            background-color: #efefef;
            text-align: center;
        }
        .image-wrap {
            display: table; /*IE8+ and non-IE */
            width: 100%;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <a class="active" href="#home">Home</a>
        </li>
        <li>
            <a href="#contact">Contact</a>
        </li>
    </ul>
    <div class="main_image"></div>
    <div class="image-wrap">
        <div class="imgContainer">
            <img src="Image/test_image_slot.jpg" />
            <p>This is image 1</p>
        </div>
        <div class="imgContainer">
            <img src="Image/test_image_slot.jpg" />
            <p>This is image 2</p>
        </div>
        <div class="imgContainer">
            <img src="Image/test_image_slot.jpg" />
            <p>This is image 3</p>
        </div>
        <div class="imgContainer">
            <img src="Image/test_image_slot.jpg" />
            <p>This is image 4</p>
        </div>
    </div>
</body>
</html>

Upvotes: 1

Salketer
Salketer

Reputation: 15711

.imgContainer{
    width:25%;
}
.imgContainer img{
    max-width:100%;
    //or: width:100%;
}

This should make it work... Basically, we set the width at 25% because 25x4 = 100, and then set a max width on the images inside so they do not stretch the container.

Upvotes: 2

Johannes
Johannes

Reputation: 67768

imgContainer { width: 25%; }
imgContainer img { width: 100%; height: auto; }

should do it

Upvotes: 2

Related Questions