How to Center Images in a Responsive Grid with CSS Only and Supporting Retina Displays

Responsive image gallery with CSS grid: How can I stretch one img to be bigger than it actually is?

Per Sujan Sundareswaran here is a working example.

    .gallery {
      display: flex;
      flex-direction: column;
      gap: 10px;

    }

    img {
      max-width: 100%;
      height: auto;
      width: auto;
      object-fit: fill;
    }

    @media screen and (min-width: 768px) {

      .gallery {
        display: grid;
        grid-template-columns: auto auto;

      }

    }

    @media screen and (min-width: 1024px) {

      .gallery {
        display: grid;
        grid-template-columns: auto auto auto;
      }

      .noods {
        grid-area: 1 / 2 / 3 / 4;

        object-fit: fill;
        background-image: url("https://images.unsplash.com/photo-1462618521524-07d259ab774a?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8MXx8fHx8fDE2MzgxNDc2NTU&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800");
        background-size: cover;
      }
    }

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />

</head>

<body>

  <div class="gallery">
    <div class="pic">
      <img
        src="https://images.unsplash.com/photo-1477925518023-22b33cbd802c?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8MXx8fHx8fDE2MzgxNDc1MzY&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
        alt="Figs" width="800" height="600">
    </div>
    <div class="pic noods"></div>
    <div class="pic"><img
        src="https://images.unsplash.com/44/Y51aFguqRcGTgsYRYBXV_20140104_085932.jpg?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8MXx8fHx8fDE2MzgxNDc3NDA&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
        alt="Razzberries"></div>
    <div class="pic"><img
        src="https://images.unsplash.com/24/Tea-Time.png?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8MXx8fHx8fDE2MzgxNDc4NTc&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
        alt="Green Tea"></div>
    <div class="pic"><img
        src="https://images.unsplash.com/photo-1471193945509-9ad0617afabf?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8fHx8fHx8MTYzODE0NzkwMg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
        alt="Veggies"></div>
    <div class="pic"><img
        src="https://images.unsplash.com/photo-1433155805822-ffc337821a5b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8fHx8fHx8MTYzODE0Nzk0Mg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
        alt="Brilliant Buffet"></div>
    <div class="pic"><img
        src="https://images.unsplash.com/photo-1470162656305-6f429ba817bf?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8fHx8fHx8MTYzODE0Nzk4Mg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
        alt="More Green Tea"></div>
    <div class="pic"><img
        src="https://images.unsplash.com/photo-1443131307017-4097c8ac7763?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8fHx8fHx8MTYzODE0ODI3Mg&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
        alt="lemonade"></div>
    <div class="pic"><img
        src="https://images.unsplash.com/photo-1474152042542-1e794677a34b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixid=MnwxfDB8MXxyYW5kb218MHwxOTA3Mjd8fHx8fHx8MTYzODE0ODM1NA&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=800"
        alt="Grapes"></div>
  </div>
</body>

</html>

Centering long horizontal image on responsive site (w/ link)

This site is not responsive at all. You might want to take a look at some tutorials, learn about:

fluid design
meta viewport tag (for touch devices)
html5
responsive design (mobile first and desktop first and why)
respond.js if you plan on supporting IE8
basic jquery
positioning, floats, displays and all css fundamentals
responsive images
background size options
box-sizing
retina images
accessibility

And the list goes on...

This is mobile first CSS. You put the SHARED, GLOBAL styles outside the media queries and you put the styles that are on larger viewports in the min-widths. You choose the min-width based on your design so that it's fluid and the inbetween sizes (since devices come in many, many sizes it will look good.

You will need to learn how to toggle the navigation if you plan on using a hamburger (three lines) or try your best and post a new SO question.

DEMO: https://jsbin.com/siyawe/1/

CSS

body,
html {
    margin: 0;
    padding: 0;
    background: #fff;
    font: 1em/1.8 sans-serif;
}
*,
*:before,
*:after {
    box-sizing: border-box
}
.featurette {
    width: 100%;
    clear: both;
    height: 0;
    padding-top: 40%;
    background: url(http://www.jhydesigns.com/maingreenlong.png);
    background-size: cover;
    background-position: 50% 50%;
}
.header {
    text-align: center
}
.header .nav ul {
    margin: 0;
    padding: 3% 0 0 0;
    position: relative;
    list-style: none;
    clear: both;
}
.header .nav a {
    text-decoration: none;
    padding: 10px;
    color: #000;
    display: block;
}
.header {
    padding: 3% 5% 0;
    position: relative;
}
.header img {
    max-width: 150px;
    width: 100%;
    display: block;
    margin: 0 auto 5%;
}
@media (min-width:400px) { 
    .header .logo {
        float: left
    }
    .header .social {
        float: right
    }
    .header .nav li {
        display: inline-block
    }
    .header img {
        margin: 0
    }
}
@media (min-width:600px) { 
    .header {
        display: table;
        width: 100%;
        padding: 3% 5%;
    }
    .header .logo,
    .header .social {
        display: table-cell;
        width: 50%;
        vertical-align: middle;
        float: none;
    }
    .header .social {
        text-align: right
    }
    .header .nav {
        position: absolute;
        bottom: -50px;
        left: 5%;
    }
    .header .nav a {
        color: #fff;
        display: inline-block;
        padding: 5px 10px;
    }
    .header .nav ul {
        left: -10px;
        padding: 0;
    }
    .header .nav li {
        display: inline-block
    }
    .featurette {
        padding-top: 30%
    }
}
.footer {
    clear: both;
    background: #000;
    color: #ddd;
    padding: 3% 5%;
    text-align: center;
}
@media (min-width:400px) { 
    .footer {
        text-align: right
    }
  
}

@media (min-width:1000px) { 
    .featurette {
        padding-top: 20%
    }
}

HTML

  <header class="header">
     <a href="#" class="logo"><img src="http://www.jhydesigns.com/Logo.png" alt="" /></a>
     <div class="social">
        X X stuff
     </div>
     <nav class="nav">
        <ul role="navigation" role="navigation">
           <li><a href="#">Link</a></li>
           <li><a href="#">Link</a></li>
           <li><a href="#">Link</a></li>
           <li><a href="#">Link</a></li>
           <li><a href="#">Link</a></li>
        </ul>
     </nav>
  </header>
  <div class="featurette" ><!-- background image --></div>
  <footer class="footer">footer</footer>

arranging images with css on a grid, in a way that's easy and does not suck

There's many ways to handle it. I'd suggest using classes. One set positions absolutely on the x axis, the other on the y axis.

.tile {position: absolute;}

.x1 {left: 0px;}
.x2 {left: 58px;}
.x3 {left: 116px;}

.y1 {top: 0px;}
.y2 {top: 58px;}
.y3 {top: 116px;}

Then each item can be positioned with classes:

<div class="tile x1 y3">

Serving identical double-sized images to retina display computers AND non-retina computers?

Ok folks, I went about answering it myself, and yes, if you use the width tag to half-size an img in HTML, the retina browser will display the full sized image.

I displayed the 1300x200 image half-sized using width on the top, and the plain 650x100 image on the bottom. Zoomed in using Safari on iOS 6.

example one
example two

Retina photograph support for responsive websites

I authored retinise.js as a lot of retina solutions out there actually serve up both images meaning massive bandwidth usage for the user, by using a custom data attribute you stop the browser downloading the original image.

My plugin does not however take into account the users connection type, e.g. 3g vs. WiFi as there is currently no way of detecting this other than doing a simple speed test, which you could modify my plugin to include.

I've used the project on several sites I've authored now, all with good results :)

As for older browser support, It will work as long as JS is enabled as the data-src is replaced with src attribute.

For support for non JS browsers you can just use a no script tag, as described in the documentation.

Is there a good practice for serving images to mobile and HIDPI/retina devices yet?

No, there is no good method for doing this. This isn't a fault of WordPress, but of the state of the web in general. HiDPI on the web is currently a big hack, basically, and the web has not yet adapted to it properly.

Basically, there's no good way to specify multiple resolution images in the HTML in a way that the browser can then use to determine the proper image to show. CSS works, but only if you're using images as backgrounds. If you're dealing with IMGs, then you have to rely on Javascript to do the job, and that has various downsides depending on your methodology.

In the future, when browsers have started to adopt methods for specifying multiple resolution images, then this won't be as much of a problem.

Edit: This deserves a bit more explanation.

The basic problem with using JS to do this is that it relies on a technique of image-replacement. The JS code, through whatever logic it has, finds the IMGs on the page, then replaces them with higher resolution versions from some other file. No matter what method is used to do this, it has two major downsides:

First, the initial image is loaded in low resolution, then loaded again in high resolution when the image is replaced. This means extra bandwidth usage, and considering most HiDPI devices are currently mobile ones, this doesn't make much sense to waste that sort of bandwidth on those devices.
Second, the image is generally first displayed in low resolution and then replaced with the high resolution image. This means that there's a second or two of showing a fuzzy image on HiDPI screens, before it "pops" into focus as the replacement occurs. This is a really crappy effect to have.

Other methods exist by which you can simply serve the proper image in the first place, but they have downsides as well.

Server-side browser detection by User-Agent is a pretty crappy way to do things in the first place, and best avoided simply because there's so many different agents out there in the wild that maintaining a list of them is virtually impossible. However, if you want to go through the pain of it, this method can work.
Alternatively, it's possible to have Javascript in the browser detect the device-pixel-ratio of the browser and set that in a Cookie to return to the server. The server can then use this cookie to serve the proper resolution image. This works, but is unreliable because many mobile user agents fail to properly set and return the cookie, and even on those that do, the high-resolution images would only be shown on the second visit to the page. First impressions are low-res, which isn't good in general.

Like you can see: It's just hacks all the way down. Until the browser is capable of being told for a specific IMG that multiple versions exist, and their parameters, and then being allowed to choose for itself, then these are the only ways to do it. But, if things like the proposed HTML5 "srcset" or the PICTURE tag are implemented, then we'll have better choices.