Posted in
15
1:16 am, June 30, 2020
stretching an image to fit in a banner image with gimp
sometimes i need to get a square image to fit in a rectangle box
this is a way to do it with GIMP
get a square image, or pick any image (pexels)
fit it in this box..
For this one we will be using GIMP which is a free and easy(ish) to use image editor
How to do it in GIMP
here is the video i show you how to use the transform tool to add sides to this image, code is below this on how to fit it into the banner div.
HTML
<h3>Original Image</h3>
<p>this is the original non-gimped image</p>
<div class='original-img'></div>
<h3>Original Image in Banner</h3>
<p>this is the original non-gimped image in the banner, you can see how it zooms to fit in</p>
<div class='banner-img'></div>
<h3>Gimp Stretched Image in Banner</h3>
<p>this is the gimped image in the banner, you can see how it should fit in the banner a bit nicer.</p>
<div class='new-banner-img'></div>
CSS
.original-img {
height:400px;
width:400px;
border:1px solid #000;
margin-bottom:20px;
background:url(https://i.imgur.com/xlYfwDD.jpg) center no-repeat;
background-size:cover;
}
.banner-img {
width:100%;
height:300px;
border:1px solid #000;
margin-bottom:20px;
background:url(https://i.imgur.com/xlYfwDD.jpg) center no-repeat;
background-size:cover;
}
.new-banner-img {
width:100%;
height:250px;
border:1px solid #000;
margin-bottom:20px;
background:url(https://i.imgur.com/MHIjv2m.jpg) center no-repeat;
background-size:cover;
}
Original Image
this is the original non-gimped image
Original Image in Banner
this is the original non-gimped image in the banner, you can see how it zooms to fit in
Gimp Stretched Image in Banner
this is the gimped image in the banner, you can see how it should fit in the banner a bit nicer.
View Statistics
This Week
78
This Month
332
This Year
0
Add Comment
Other Items in gimp
Related Search Terms
Other Categories in Code
c testing apache apps asp bat bootstrap bootstrap templates core css css grid design elements fancybox fonts foundation framework gimp git html icons ideas images javascript jquery js linux mac nginx node php php functions php simple html dom pi400 python react sections site bugs site documentation sql sqlite sublime svg templates tools virtual box webdev windows wordpress