CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Hurtox
Hurtox

Reputation: 89

How to make an image fit and autoresize no matter the screensize?

I'm currently making my personal website and I struggling when it comes to images and smaller screens. I basically want to position a portrait image of me in the middle of the screen above the header text and make it stay there when using a smaller screen size. I've tried position: relative and similar solutions but I just can't get it to work.

I basically want to position it above the header text and make it automatically scale when using different screen sizes. I also want it to have a fixed width and height.

Here's the code: 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Oskar Yildiz</title>

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>    
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="main.css" 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>


    <div id="wrapper">

    <div id="bg" class="background-div">
    </div>
    <div id="header" class="container">
        <div class="row">
            <div class="col-xs-12">
                <img class="img-circle" src="files/portraitcrop.jpg" />
                <h1 id="main-title" class="page-title">Oskar Yildiz</h1>
                <h2 class="page-description" style="font-style: normal;">
                Welcome
                </h2>
                <h2 class="page-description">
                Young tech enthusiant, web developer and content creator.

                </h2>

            </div>
        </div> 
    </div>

</div>


<script type="text/javascript">
$("#main-title").fadeIn();
</script>

CSS: 

        body {
        margin: 0;
        padding: 0;
        font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
        font-weight: 300;
        /*background-image: url("./files/bg.jpg");*/
    }

    .background-div {
        background-image: url("./files/background.jpg");
        width: 100%;
        min-height: 100%;
        background-repeat: no-repeat;

        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover; 
        background-size: cover;


        position: fixed;
        top: 0;
        left: 0;
        display: table;
        background-position: center;

        -webkit-filter: blur(3px);
        -moz-filter: blur(3px);
        -o-filter: blur(3px);
        -ms-filter: blur(3px);
        filter: blur(3px);
    }

    #header {
        display: table;
        position: relative;
    }

    .page-title {
        text-align: center;
        text-transform: uppercase;
        color: white;
        margin-top: 330px;
        font-size: 2em;
        margin-bottom: 0px;
    }

    #header h2 {
        margin: 0;
    }

    .page-description {
        text-align: center;
        color: white;
        padding-top: 8px;
        font-style: italic;
        font-family: "Trebuchet MS", Helvetica, sans-serif;
        font-size: 150%;
    }

    .portrait { 
    }

    img {
        padding: 0;
        margin: 0;
        min-height: 30%;
        min-width: 30%;
    }

    .oskar {  
        width:100%;
        height:100%;
        background-size: cover;
        display: table;
        background: #222 no-repeat center center;
        background-color: #222;
        background-image: url("./files/bg.jpg");
    }

Upvotes: 1

Views: 3249

Answers (1)

Cwoelfle
Cwoelfle

Reputation: 46

You can use the class img-responsive on your images. So, for instance

<img class="img-responsive" src="path to image" alt="image of me"/>

however in the comments you mentioned you don't want it to take up the entire screen from left to right, so a solution to fix that issue is to use the already included, grid system.

lets say you wanted the image to take up 50% of the page on all devices. You would use code like this.

<div class="col-xs-6 col-xs-offset-3">
   <img class="img-responsive" src="path to image" alt="image of me"/>
</div>

What this code does is simple, it makes a div that on extra small (xs) devices is 6 columns. 6 columns is half of the grid since the grid consists of 12 columns, and is thus 50% when you use 6 columns. Then we added the offset class to xs that pushes the content over 3 columns to the right, which centers the image and makes it so that the other 50% of the page is in the spacing 25% on the left, and 25% on the right.

Using the grid system as I have done here will let you control the spacing around the image, but having a fixed width and height is not possible to accomplish what you want.

I hope this helps you with your issue, if you need any more assistance, i'll be here to help. :)

Upvotes: 3

Related Questions