asked    Maggie     2018-10-22       html       84 view        4 Answers

[SOLVED] How to Make my Image Stretch All the Way?

I'm styling the home page of my website; I want the image (see photo below) to stretch all the way below the header. Is there any way I can do that?

Here's my index.pug file code:

extends _component/layout/layout

block super-config
    -
        var active = '/'

block awesome-content
    .img
        img(src="")

  4 Answers  

        answered    Meredith     2018-10-22      

    img{
        width:  100%;
        height: 100%;
    }

You can use this code absolutely, but the content you place after this div will appear below the image

There is also another method, you can call it as background-image

  img{
        background-image:  example.jpg;
        background-size: cover;
    }

If you want the next content to appear on the above of the image, then set it as background-image.



        answered    Lynn     2018-10-22      

Try this out, this one should work properly:

<!DOCTYPE HTML>
<html>
    <body>

        <div id="wrapper">
            <img src="" />
        </div>​​​​​​​​​​

        <style>
        #wrapper, img{
            width:  100%;
            height: 100%;
        }
        </style>
    </body>
</html>


        answered    Prudence     2018-10-22      

Normally, this one should work:

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

if you use height:100%; it will fill the section, but won't maintain the aspect ratio.



        answered    Bowen     2018-10-22      

I found another fix, which was to say:

.img-photo {
    height: 100vh;
    background-size: cover;
    background-position: center center;
    background-image: url();
}




Your Answer





 2018-10-22         Franklin

How to use the same nginx.conf file for reverse proxy for docker-compose and kubernetes

in Kube, i have one pod with two containers* container 1: nginx reverse proxy* container 2: myappfor testing purpose, i also has a docker compose file, include the two services* service 1 nginx reverse proxy* service 2: myappthe issue is, in docker, the nginx upstream host is in the format of container name. In Kube, it is localhost.Here is a code snipt://for docker, nginx.conf... upstream web{ server myapp:8080; }.... proxy_pass http://web;//for Kube, nginx.conf ... upstream web{ server localhost:8080; } .... p...
 docker                     2 answers                     61 view
 2018-10-22         Wade

Nginx Docker Volumes empty

When using docker-compose, nginx isn't showing files like other images might.For example with Mysql, the below code will save the data created at /var/lib/mysql to the local machine at ./volumes/db/data./volumes/db/data:/var/lib/mysqlAnother example, with Wordpress, the below code will save the data created at /var/www/html/wp-content/uploads to the local machine at ./volumes/uploads/data./volumes/uploads/data:/var/www/html/wp-content/uploadsThis is not working with nginx though so no matter what I change /some/nginx/path to, it never appears at ./volumes/nginx/data./volume...
 mysql                     2 answers                     60 view
 2018-10-22         Tiffany

Nginx web server is not pointing to the right directory

I have recently setup a new server with nginx as my web server.I have created a directory 'WWW/server' where I store my node/express application, which runs fine on another server.The default nginx directory is /var/www/html.I've changed that pointer in the default file from root /var/www/html/ to root /WWW/server/But this doesn't seem to change after I restart the nginx server.How do you change the app director?????? It's hard to see what's going on without your nginx config file.default is:root /var/www/html;you should be able to change it to:root /WWW/server;Make sure...
 node.js                     1 answers                     60 view