Posted in
7473
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
124
This Month
1136
This Year
2360
Add Comment
Other Items in gimp
Related Search Terms
Other Categories in Code
alpine js apps c css factorio font awesome images linux quick modals sqlite site bugs site updates slick slider sliders testing windows apps apache api apps asp bat bootstrap bootstrap templates charts cookies core css css filters css grid design elements docker domains emoji fancybox fonts foundation framework gimp git html icons ideas image formatting images javascript javascript functions jquery js linux mac misc modals mysql nginx node php php errors php function php functions php simple html dom pi400 python react regex sections simple_html_dom simplepie php site bugs site documentation slick slider sql sqlite ssh sublime svg svg css templates tools virtual box vscode vue webdev windows windows 11 windows commands wordpress