I am struggling to display the center of an image within a circle-shaped <img> tag with a border-radius of 50%. The issue arises when trying to display an image fetched from Firebase storage, rather than from a URL.
In attempt to solve this problem, I have experimented with JavaScript code that successfully centers the image when done as follows:
.box {
height: 100px;
width: 100px;
overflow: hidden
}
.wh {
height: 100%!important
}
.ww {
width: 100%!important
}<div class="box" style="border-radius:50%;">
<img src="1.jpg" />
</div>
<input type="file" id="fileButton" /> <input type="submit" value="Upload" id="uploadButton" />This produces the desired result:
https://i.sstatic.net/Jk2zV.png
However, when attempting to use the same image from Firebase, the outcome is different:
https://i.sstatic.net/m7efx.png
Here is the code snippet utilizing Firebase along with the necessary JavaScript for image centering (which was also used in the previously mentioned URL example):
var fileButton = document.getElementById('fileButton');
var uploadButton = document.getElementById('uploadButton');
// Adds an event listener to watch for changes in the file input
fileButton.addEventListener('change', function(e) {
var file = e.target.files[0];
// Creates a storage ref in firebase
var storageRef = firebase.storage().ref('test/profilePic.jpg');
console.log(file.height);
// Listens for click on upload button
uploadButton.addEventListener('click', function(e) {
storageRef.put(file).then(function() {
window.open('profil.php?error=1', '_top');
});
});
});
var storage = firebase.storage();
var storageRef = storage.ref();
var spaceRef = storageRef.child('test/profilePic.jpg');
storageRef.child('test/profilePic.jpg').getDownloadURL().then(function(url) {
var test = url;
document.getElementById('profilePicture').src = test;
}).catch(function(error) {
});
...
.box {
height: 100px;
width: 100px;
overflow: hidden
}
.wh {
height: 100%!important
}
.ww {
width: 100%!important
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" style="border-radius:50%;">
<img id="profilePicture" />
</div>
<input type="file" id="fileButton" /> <input type="submit" value="Upload" id="uploadButton" />If you have any insights or solutions on how to resolve this issue, please let me know!