Make an Image Responsive - the Simplest Way

Make an image responsive - the simplest way

You can try doing

<p>
  <a href="MY WEBSITE LINK" target="_blank">
    <img src="IMAGE LINK" style='width:100%;' border="0" alt="Null">
  </a>
</p>

This should scale your image if in a fluid layout.

For responsive (meaning your layout reacts to the size of the window) you can add a class to the image and use @media queries in CSS to change the width of the image.

Note that changing the height of the image will mess with the ratio.

How to make an image responsive in HTML email regardless of image size

Yes and no. Outlook tends to force the image to its actual size, regardless of your CSS and HTML sizings. So using images that are bigger than what you want to be displayed on your desktop version is likely to break on Outlook.

Your best bet for responsive images would be to have the images as 100% width inside a table that has max-width set. Then around this table, make conditional code for MSO that contains a set width table at the max-width size.

Example below:

<!--[if gte MSO 9]>
  <table width="640">
     <tr>
        <td>
<![endif]-->
  <table width="100%" style="max-width:640px;">
    <tr>
      <td>
        <img src="image.jpg" width="100%" />
      </td>
    </tr>
  </table>
<!--[if gte MSO 9]>
      </td>
    </tr>
  </table>
<![endif]-->

There will still be some quirks with using max-width as not all clients support it. I would view CSS compatability and make little tweaks as needed on top of the above to ensure it fits. Then test and test some more.

Can I make an image responsive using only Html tags without any CSS?

Yes, you can set the width="N%" and the image will resize based on the width of the browser window. So 100% will fill the screen, 50% will fill half, etc.

How do I auto-resize an image to fit a 'div' container?

Do not apply an explicit width or height to the image tag. Instead, give it:

max-width:100%;
max-height:100%;

Also, height: auto; if you want to specify a width only.

Example: http://jsfiddle.net/xwrvxser/1/

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

.portrait {
    height: 80px;
    width: 30px;
}

.landscape {
    height: 30px;
    width: 80px;
}

.square {
    height: 75px;
    width: 75px;
}

Portrait Div
<div class="portrait">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Landscape Div
<div class="landscape">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Square Div
<div class="square">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Responsive Images with CSS

.erb-image-wrapper img{
    max-width:100% !important;
    height:auto;
    display:block;
}

Worked for me.

Thanks for MrMisterMan for his assistance.

My image size is fixed. How to make it flexible?

This works for me:

.post.type-post.status-publish img {
    width:auto !important;
}

Trying to make banner/image responsive

You can try

background-size: contain;

its the easiest way to make a background image to be responsive.
But note as the width adjusts with the screen width, it will also make the image proportionally reduce in height.

I can see you have a fixed height and already use

background-size: cover;

which is what i'll normally recommended if you want it auto fill the container irrespective of the size of the container.

You cant have both (not stretched & always fill irrespective of the size of container). Looking at the image ( the white space that blends with the page & assuming its a must use) i suggest you add this to the class so it remains responsive but always fixes the design at the bottom of the div so it can always blend into the white above. Let me know if you need any clarification or questions

background-position: center 100%;

How can I make my background image 'img-responsive'?

Use background-size: cover

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

cover - A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.

Alternatively you might try contain depending on your desired behavior, but from the looks of your portfolio, cover is what you want

contain: A keyword that scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). Image is letterboxed within the container. When the image and container have different dimensions, the empty areas (either top/bottom of left/right) are filled with the background-color.

* edit - also added background-position: center center; background-repeat: no-repeat; in the shorthand background property for .hero since from the looks of your portfolio, you want those.

<!DOCTYPE html><html>
<head>  <html lang="en">  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Liam Docherty Digital Portfolio</title>  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  <link rel="stylesheet" href="css/style.css">
  <style>    body {      margin: 0;      padding: 0;    }        .navbar.navbar-default {      background-color: #4D5061;      height: 10vh;      z-index: 100;    }        .navbar.navbar-default ul {      list-style-type: none;      text-align: right;    }        .navbar.navbar-default ul li {      display: inline-block;    }        .dropdown-menu li {      text-align: center    }        .dropdown .dropdown-menu {      background-color: #4D5061;    }        .dropdown .dropdown-menu a {      color: white;    }        .navbar.navbar-default ul li a {      display: inline-block;      padding: 3.5vh 8px 4px;      color: white;      text-decoration: none;      font-size: 14pt;      font-family: 'Roboto', sans-serif;    }        .navbar.navbar-default ul li:after {      content: '';      position: absolute;      right: 50%;      bottom: 0;      left: 50%;      height: 3px;      background-color: #FFFFFF;      border-radius: 9px;      transition: all .2s;    }        .navbar.navbar-default ul li a:hover {      color: white;    }        .nav.navbar-nav,    .nav.navbar-nav>li {      float: none;    }        .navbar.navbar-default ul li:hover:after {      right: 0;      left: 0;    }        .nav-title {      font-size: 14pt;      margin: 0;      top: 35px;      left: 50px;      width: 100%;      position: absolute;      text-align: center;      color: white;      font-family: 'Roboto', sans-serif;    }        .navbar.navbar-default ul.dropdown-menu li,    .navbar.navbar-default ul.dropdown-menu li a {      position: relative;      display: block;    }        #logo {      padding-top: 2vh;      padding-left: 20px;      float: left;    }        .hero {      background: url("https://static.pexels.com/photos/48727/pexels-photo-48727.jpeg") center center no-repeat;;      background-attachment: fixed;      position: relative;      background-size: cover;      text-align: center;      width: 100%;      max-width: 100%;      width: 100vw;      height: 100%;    }        section {      position: relative;      height: 95vh;    }        .section1 {      height: 100vh;      text-align: center;      color: white;    }        .section2 {      background-color: #11B5E4;      text-align: center;      color: white;    }        .section3 {      background-color: #FFFFFF;      text-align: center;      color: white;    }        .fa-angle-down {      color: #4D5061;      position: absolute;      bottom: 0px;    }        .fa-angle-up {      color: #4D5061;      position: absolute;      bottom: 0px;    }        .footer {      height: 6vh;      background-color: #4D5061;      padding: 0;      right: 0;      bottom: 0;      left: 0;    }        .footertext {      font-size: 14pt;      color: white;      font-family: 'Roboto', sans-serif;      text-align: center;    }        .profile.box {      bottom: 0;      height: 50%;      left: 0;      margin: auto;      position: absolute;      right: 0;      top: 0;      width: 50%;    }        .shape {      border-radius: 25px;      background: #4D5061;      content: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg);      color: white;      height: 250px;      margin: auto;      padding: 3px;      width: 250px;    }        .shape2 {      background: linear-gradient(35deg, #4D5061, #4D5061);      border-radius: 85px;      color: white;      height: 40px;      margin: 1% auto;      opacity: 0.9;      padding: 0px;      width: 250px;    }  </style>
</head>
<body>  <nav class="navbar navbar-default navbar-fixed-top">    <div class="container-fluid">      <!-- Brand and toggle get grouped for better mobile display -->      <div class="navbar-header">        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">                        <span class="sr-only">Toggle navigation</span>                        <span class="icon-bar"></span>                        <span class="icon-bar"></span>                        <span class="icon-bar"></span>                    </button>        <a class="navbar-brand" href="#"><img src="http://placehold.it/60x60" alt="Your Brand Name"></a>        <h1 class="nav-title">Liam Docherty's Digital Portfolio</h1>      </div>      <!-- Collect the nav links, forms, and other content for toggling -->      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">        <ul class="nav navbar-nav">          <li><a href="#">Home</a>          </li>          <li class="dropdown">            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">About Me <span class="caret"></span></a>            <ul class="dropdown-menu">              <li><a href="#">Action</a>              </li>              <li><a href="#section3">Contact</a>              </li>              <li><a href="#">Something else here</a>              </li>              <li><a href="#">Separated link</a>              </li>              <li><a href="#">One more separated link</a>              </li>            </ul>          </li>          <li class="dropdown">            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Units <span class="caret"></span></a>            <ul class="dropdown-menu">              <li><a href="#">Action</a>              </li>              <li><a href="#">Another action</a>              </li>              <li><a href="#">Something else here</a>              </li>
              <li><a href="#">Separated link</a>              </li>
              <li><a href="#">One more separated link</a>              </li>            </ul>          </li>          <li><a href="#">Clients</a>          </li>          <li><a href="#contact-me">Contact Me</a>          </li>        </ul>      </div>      <!-- /.navbar-collapse -->    </div>    <!-- /.container-fluid -->  </nav>

  <section id="section1" class="section1">    <div class="hero">      <div class="profile box">        <div class="shape"></div>        <div class="shape2">          <p>kjjjjjjjjjkjjjkkjkj</p>        </div>      </div>    </div>




    <a href="#section2"><i class="fa fa-angle-down" style="font-size:100px;"></i></a>
  </section></html>

Make an Image Responsive - the Simplest Way