How can I extend an image's height equidistant beyond its full-width container?

Related searches

I have an image I'd like to extend beyond its parent container, just on the top and bottom, the same distance. I'm able to achieve this effect on the top, but am not able to do so on the bottom. How can I achieve this effect while still remaining responsive and keeping remaining content within the parent?

I've tried various methods of absolute positioning, but kept breaking the grid. I was able to achieve what I have thus far using negative margins, but only on top.

This is the very basic code I have thus far and here's the jsfiddle.:

.band {
  background-color: #ddd;
  margin-top: 100px;
}

.contain {
  margin: 0 auto;
  max-width: 600px;
}

.row {
  align-content: flex-start;
  clear: both;
  display: flex;
  flex-flow: row wrap;
  overflow: visible;
}

.col {
  width: 50%;
}

.col-image {
  margin-top: -20px;
}

p {
  padding: 20px;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
}
<div class="band">
  <div class="contain">
    <div class="row">
      <div class="col">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
      <div class="col col-image">
        <img src="https://via.placeholder.com/800x450?text=fpo">
      </div>
    </div>
  </div>
</div>

How To Stretch Images & Extend Backdrops In Record Time In , Put the clone stamp tool down, and use Crop and Content Aware Scale to extend your backgrounds and backdrops with ease. How to Increase the Size of an Image The easiest way to increase the size of an image is to use Photoshop. This makes it easy to “upscale” images while taking steps to minimize loss of quality. Click here for detailed instructions on using Photoshop to increase the size of images.

Positioning seems to work

.band {
  background-color: #ddd;
  margin-top: 100px;
}

.contain {
  margin: 0 auto;
  max-width: 600px;
}

.row {
  align-content: flex-start;
  clear: both;
  display: flex;
  flex-flow: row wrap;
  overflow: visible;
  position: relative;
}

.col {
  width: 50%;
}

.col-image {
  position: absolute;
  top: -20px;
  bottom: -20px;
  left: 50%
}

p {
  padding: 20px;
}

img {
  display: block;
  height: 100%;
}
<div class="band">
  <div class="contain">
    <div class="row">
      <div class="col">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
      <div class="col col-image">
        <img src="https://via.placeholder.com/800x450?text=fpo">
      </div>
    </div>
  </div>
</div>

A Guide on How to Extend Background in Photoshop, To extend the background image, you need to open a photo in Instead of concentrating on what we don't have in our picture, let us take� Extend an Image : Content Aware Scale Tutorial : Photoshop CS6 Thanks for watching. 'Like', Comment, Share and Subscribe. Search Terms: content aware scale,

You can also play with background of the band element to simulate this

.band {
  background: 
    url(https://via.placeholder.com/800x450?text=fpo) calc(50% + 160px) 0/auto 100%,
    linear-gradient(#ddd,#ddd) center/100% calc(100% - 40px);
  background-repeat:no-repeat;
  margin-top: 100px;
}

.contain {
  margin: 0 auto;
  max-width: 600px;
}

.row {
  display: flex;
  flex-flow: row wrap;
}

.col {
  width: 50%;
}

p {
  padding:40px 20px;
}
<div class="band">
  <div class="contain">
    <div class="row">
      <div class="col">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
  </div>
</div>

How to Stretch Images using Content Aware Scale, Start by extending the canvas behind your image. You can TIP: Hold Alt/Opt while doing this Duration: 9:47 Posted: Jun 30, 2015 Use the top left button to select and upload your picture. Resize Your Image supports different extensions as.jpg,.gif,.png,.tiff,.pdf,.raw,.txt etc.. Since you resize the image online and the website depends on the speed of your internet connection, the upload time can be variable. Be patient if it lasts!

How to Extend Backgrounds in Photoshop, Today we show you how to extend almost any background in Photoshop! Want to add text to an Duration: 15:21 Posted: Sep 24, 2019 If you need to extend a photo by adding more sky, clouds, grass, snow or other organic "background", here's the easy way, using Photoshop CS5 or later: 1. Choose Image > Canvas Size. Increase the width or height of your image, choose the anchor, set the Canvas extension color to White, and click OK.

How to Extend Background in Photoshop, Have you ever needed to extend the background of an image for your Instagram feed, or Duration: 9:51 Posted: Mar 11, 2019 One of them is compressing the image: compression reduces file size without having to resize the image, but image quality will suffer as you increase compression and start losing more image data. The other solution is to resize your photo, decreasing the number of pixels it takes to store the image, which reduces it's file size proportionally.

You can use File > Open, Drag-and-Drop, or paste to bring the image into Photoshop. If for whatever reason it isn't the background layer, right click the layer in the Layers panel and choose Merge Down. Go to Image > Canvas Size in the top menu. In the Canvas Size dialog that opens, enter the additional measurements you want and select OK.

Comments
  • @joewindetc simplified fiddle for the above: jsfiddle.net/xhue8bvw
  • This is perfect, exactly what I was looking for. Thanks a ton. And then thanks for the introduction to object-fit, that's a new one to me.
  • Thanks for the feedback. I had originally started with something like this, but ran into the issue where the width of the image wouldn't adjust with the width of the parent container.
  • I like this! A way I hadn't considered. Looking forward though, this image might also become a video. I'll have to add this to my toolbox regardless. Thanks!