Posted in
183
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.
stretching an image to fit in a banner image with gimp Demo
View Demo Full Screen View Demo New Tab
stretching an image to fit in a banner image with gimp Code
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;
}Add Comment
Other Items in gimp
Related Search Terms
Other Categories in Code
php functions
php functions
php functions