I'm trying to upload an image with FileBase64, I have an admin side app and i'm uploading the images from there and then view it in client side, the image doesn't upload in it's dimensions! I don't why i'm getting the image with the wrong dimensions
see how the image its not covering the whole container, the code is below
The code for the client side:
<div className="postImgContainer">
{isPostsLoading ? (
<Skeleton variant="rectangular" width= "350px" height="270px" />
):(
post.photo[0] && (
<Link to={`/post/${post._id}`} className="link">
<img
className="postImg"
src={post.photo}
alt=""
/>
</Link>
)
)}
</div>
The CSS:
.postImgContainer{
display: flex;
width: 100%;
}
.postImg{
width: 100% !important;
height: 270px;
object-fit: cover;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
Now the admin side, i'm uploading the image and preview it, please see image below
The code for the admin side:
<div className="newPostTitleImageUploadCont">
<div className="newPostTitleContainer">
<label className="newPostFormLabel">Post Title:</label>
<input dir="auto" type="text"
/>
</div>
<div className="newPostUploadImgContainer">
<div className="newPostUploadImgCont">
{baseImage ? (
<img src={baseImage}
alt=""
className="newPostUploadImg" />
):(
<img src="/Images/defaultImage.jpeg"
alt=""
className="newPostUploadImg" />
)}
</div>
<label for="file">
<PublishIcon />
</label>
<input
type="file"
id="file"
accept="image/*"
onChange={(e) => { uploadImage(e) }}
style={{display: "none"}} />
</div>
</div>
The CSS:
.newPostTitleContainer > input {
width: 80%;
}
.newPostUploadImgContainer{
display: flex;
align-items: center;
margin-top: 15px;
}
.newPostUploadImgCont{
display: flex;
width: 200px;
height: 200px;
}
.newPostUploadImg{
width: auto;
height: auto;
border-radius: 10px;
object-fit: cover;
margin-right: 20px;
}
I'm not setting a size for the image in CSS, i'm just setting a size for the container of it, so why the image is not uploading in it's size? I tried to set width: 100% and height: 100% in .newPostUploadImg{} but it didn't work also!
Related
I have created a resizable split view you can drag the line between to increase and decrease the size of the left and right screens. the right screen consists of two canvases containing 2 images on them we can write on that canvas. The problem is that the body has a height of 100% but the canvas overlapping the <div class="container1"> and the HTML, body. HTML and body is not expanding with the canvas as shown in the below image:
Here is the image of the <div class="container1"> border consisting of right and left sides and a resizable line between them. I can not resize below the container line because the container is not expanding with the canvas.
HTML CODE:
<div class="container1">
<div class="container__left">
<form id="orderByPicFrm">
<div class="form-group">
<input
type="hidden"
class="form-control"
id="code"
aria-describedby="emailHelp"
placeholder="Code"
size="3"
disabled
/>
</div>
<div class="form-group">
<label for="itemName">Name</label>
<input
type="text"
class="form-control"
id="itemName"
placeholder="Name"
size="50"
/>
</div>
<div class="form-group">
<label for="qty">clear </label>
<button
type="submit"
class="btn btn-primary"
onclick="clearfield(event)"
>
clear
</button>
</div>
</form>
</div>
<div class="resizer" id="dragMe"></div>
<div class="container__right">
<div class="absolute">
<div id="navbar">
<button type="button" onclick="zoomin_canvas()">+</button>
<button type="button" onclick="zoomout_canvas()">-</button>
<button id="rotateRight" onclick="rotateRight()">Right</button>
<button id="rotateLeft" onclick="rotateLeft()">Left</button>
<button id="Button1" onclick="draw()">draw</button>
<label> Marking</label>
<label class="switch">
<input type="checkbox" checked onclick="doMarking()" id="mark" />
<span class="slider round"></span>
</label>
</div>
<div class="fix">
<img id="img1" src="img.JPG" style="display: none" />
<canvas
fileName="img.JPG"
id="canvas1"
rotate="0"
onclick="selectImg(event)"
onmousedown="mouseDown(event)"
onmouseup="mouseUp(event)"
onmousemove="mouseMove(event)"
>
Your browser does not support the HTML5 canvas tag.
</canvas>
<img id="img2" src="img2.jpeg" style="display: none" />
<canvas
fileName="img2.jpeg"
id="canvas2"
rotate="0"
onclick="selectImg(event)"
onmousedown="mouseDown(event)"
onmouseup="mouseUp(event)"
onmousemove="mouseMove(event)"
>
Your browser does not support the HTML5 canvas tag.
</canvas>
</div>
</div>
</div>
</div>
CSS CODE:
<style>
.container1 {
display: flex;
border: 1px solid #cbd5e0;
height: 100%;
width: 100%;
}
.container__left {
width: 50%;
display: flex;
flex-direction: column;
min-width: 18rem;
}
.resizer {
background-color: #cbd5e0;
cursor: ew-resize;
height: 100%;
width: 2px;
}
.container__right {
flex: 1;
display: flex;
justify-content: center;
}
body,
html {
box-sizing: border-box;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
I took the resizable code from this website :https://htmldom.dev/create-resizable-split-views/
Your elements are positioned absolutely even if the body has 100% width and height. Remove positioning and display the elements in flex.
#container {
display: flex;
width: 100%;
height: 100%;
}
#left_panel {
display: flex;
background-color: white;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
overflow: scroll;
}
.column {
display: flex;
flex-direction: column;
max-height: 70vh;
}
I am using vue-bootstrap.
I want to effect object-fit: cover to the image.
I uploaded the image from my ios device(iphone X), then when I check the android device and the desktop web browser(chrome), the aspect ratio is not fixed and the style is not working properly.
In the android device and the pc, the image is stretched sideways.
I also checked other ios devicies like iphone 7, the style was perfect.
Now the image size is correct.
How can I fix this issue?
I searched the web pages, and this problem might be caused by exif information rather than the css style.
template file
<template>
<div>
<b-container class=" mx-auto">
<b-row class="d-flex justify-content-center">
<b-col cols="5">
<div class="image-area mx-auto" v-for="(item, index) in imageData" v-bind:key="index">
<img :src="item" alt="" class="picture">
</div>
</b-col>
<b-col cols="7" vertical-align="center">
<div class="upload">
<input type="file" name="imageSample" #change="uploadStorefront" id="file" accept="image/png,image/jpeg">
<label for="file">
Upload
</label>
</div>
</b-col>
</b-row>
</b-container>
</div>
</template>
css
<style lang="scss" scoped>
.picture-size {
margin-top: 9rem;
font-size: 30px;
}
.image-area {
margin-left: 12rem;
}
.picture {
height: 228px;
width: 400px;
object-fit: cover;
//0.57142857
}
input[type="file"] {
display: none;
}
.upload {
margin-top: 74px;
margin-left: 13rem;
border-radius: 27px;
width: 130px;
height: 40px;
color: white;
background: linear-gradient(85deg, #aa233a, #aa233a, 60%, #472958);
border: none;
padding-top: 10px;
}
</style>
I am using node.js with the handlebars template engine. Currently, the thumbnail images from the database are displaying at a width and height of 70 which is specified in the code. See below. How can I allow the user to click on the image in handlebars and see a larger rendition of the photo?
The current images are too small to see but I would only like for them to be increased upon clicking them.
I am using handlebars....so a variation of this would help...(without "onClick=" method as I am using node.js and it won't work)
<style>
img.std {
height: 10%;
}
img.big {
height: 40%;
}
</style>
<img id="img" class="std" onClick="(this.className=='std')?this.className='big':this.className='std'" src="/uploads/{{photo_image}}">
You can add an IIFE type function, and use an arrow function so the this keyword refers to the image:
.container{
height: 200px;
border: solid 1px gray;
}
img.std {
height: 60%;
}
img.big {
height: 80%;
}
<div class="container">
<img id="img" class="std" onClick="(() => {
this.className = this.className === 'std' ? 'big' : 'std';
})(); return false;" src="http://placekitten.com/200/200">
</div>
You can do this quite easily with jQuery with:
$(document).on('click','img',function(){
if (this.id == "img") {
this.className=='std' ? this.className = 'big' : this.className='std';
}
});
<img id="img" class="std" src="/uploads/{{photo_image}}">
I would suggest to use unique id for the tag to avoid future ambiguity (potential bugs).
Here's the checkbox hack implemented to your code:
.imgcontainer {
position: relative;
display: inline-flex;
align-items: stretch;
justify-content: stretch;
}
.imgcontainer input[type='radio'] {
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.imgcontainer input[type='radio'] + img.std {
height: auto;
width: 100px;
}
.imgcontainer input[type='radio']:checked + img.std {
width: 200px;
}
<div class="imgcontainer">
<input type="radio" name="imgcontainerradio">
<img id="img" class="std" src="http://placeimg.com/640/480/any">
</div>
<div class="imgcontainer">
<input type="radio" name="imgcontainerradio">
<img id="img" class="std" src="http://placeimg.com/640/480/arch">
</div>
<div class="imgcontainer">
<input type="radio" name="imgcontainerradio">
<img id="img" class="std" src="http://placeimg.com/640/480/nature">
</div>
What I'm trying to do:
1 - How can I use a second file input to set the background image of a class of divs, in this case the class .logo? (currently, I have one file input, which is setting the background image for the class .background, but I need to add a second file input)
2 - How can I include a link that will "delete" or "trash" the file selected via the file input in order to reset a class of divs as having no background image?
Here is how I've tried to work through this problem so far:
I tried to add a second button, and duplicate the JS and then change the class names, however this broke everything. So I've provided two buttons for the file inputs here. Also, I tried to search for how to delete a file input once uploaded, but I could not understand anything I found. I read through this question about clearing a form, but I could not successfully apply what was described.
Here's what I've tried so far:
$('.verborgen_file').hide();
$('.uploadButton').on('click', function() {
$('.verborgen_file').click();
});
$('.verborgen_file').change(function() {
var file = this.files[0];
var reader = new FileReader();
reader.onloadend = function() {
$('.background').css('background-image', 'url("' + reader.result + '")');
}
if (file) {
reader.readAsDataURL(file);
} else {}
});
.background {
background-image: url("");
background-position: center;
width: 100%;
border: 0px dashed #ddd;
background-color: #fbfbfb;
padding: 10px;
}
.background:hover {
cursor: move;
}
div.bg-img {
background-position: center;
background-repeat: no-repeat;
}
.responsive {
background-image: url("");
background-size: 120%;
background-position: center;
min-height: 20vh;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
}
.medium {
background-image: url("");
background-size: cover;
background-position: center;
height: 150px;
width: 100%;
margin-top: 15px;
margin-bottom: 15px;
position: relative;
}
.logo {
height: 50px;
width: 80px;
background-color: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inputSection">
<h1>Input Section</h1>
Background:
<input type='file' class='verborgen_file' />
<input type="button" value="Upload" class="uploadButton" />
delete
<br> Logo:
<input type="button" value="Upload" class="uploadButton" />delete
</div>
<br>
<div class="imageSection">
<h1>Divs with Images Section</h1>
<div class="background responsive bg-img">
<div class="logo">
</div>
</div>
<div class="background medium bg-img">
<div class="logo">
</div>
</div>
</div>
In my experience, I would suggest to put the files that being selected by input in an array for further works.
But in your case, it would be simple. (However, the HTML structure makes this problem a little more complex.)
I added some input in HTML and added some data-attribute to <input> and <a>.
And, see comments below...
Edit: Since you separated them and put into another div, the parent() would be that div. Our goal is looking for the div contains both inputSection and imageSection, so replace parent() with parents('.container'). That's it!
$('.verborgen_file').hide();
$('.uploadButton').on('click', function() {
// find relative input and trigger click event
var id = $(this).data('id')
var target = $(this).siblings('input[data-id=' + id + ']')
target.click();
});
$('.verborgen_file').change(function() {
var $this = $(this)
var file = this.files[0];
var id = $(this).data('id')
var reader = new FileReader();
reader.onload = function() {
// find either .background or .logo class in container and change the image
$('body').find('div[data-id='+ id +']').css('background-image', 'url("' + reader.result + '")');
}
if (file) {
reader.readAsDataURL(file);
} else {
// if file doesn't exist, clear the image
$('body').find('div[data-id='+ id +']').css('background-image', '');
}
});
$('a').on('click', function(e) {
e.preventDefault()
var $this = $(this)
var id = $this.data('id')
var inputID = $this.siblings('input[data-id=' + id + ']').attr('id')
// clear the relative input and trigger change event
$('#' + inputID).val('').trigger('change')
})
.background {
background-image: url("");
background-position: center;
width: 100%;
border: 0px dashed #ddd;
background-color: #fbfbfb;
padding: 10px;
}
.background:hover {
cursor: move;
}
div.bg-img {
background-position: center;
background-repeat: no-repeat;
}
.responsive {
background-image: url("");
background-size: 120%;
background-position: center;
min-height: 20vh;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
}
.medium {
background-image: url("");
background-size: cover;
background-position: center;
height: 150px;
width: 100%;
margin-top: 15px;
margin-bottom: 15px;
position: relative;
}
.logo {
height: 50px;
width: 80px;
background-color: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h1>Input Section</h1>
<div class="inputSection">
Background:
<input id="bgInput1" type='file' class='verborgen_file' data-id="background1" />
<input type="button" value="Upload" class="uploadButton" data-id="background1" />
delete
<br> Logo:
<input id="logoInput1" type='file' class='verborgen_file' data-id="logo1" />
<input type="button" value="Upload" class="uploadButton" data-id="logo1" />
delete
</div>
<br>
<div class="imageSection">
<h1>Divs with Images Section</h1>
<div class="background responsive bg-img" data-id="background1">
<div class="logo" data-id="logo1">
</div>
</div>
<div class="background medium bg-img" data-id="background1">
<div class="logo" data-id="logo1">
</div>
</div>
</div>
</div>
<div class="container">
<h1>Input Section</h1>
<div class="inputSection">
Background:
<input id="bgInput2" type='file' class='verborgen_file' data-id="background2" />
<input type="button" value="Upload" class="uploadButton" data-id="background2" />
delete
<br> Logo:
<input id="logoInput2" type='file' class='verborgen_file' data-id="logo2" />
<input type="button" value="Upload" class="uploadButton" data-id="logo2" />
delete
</div>
<br>
<div class="imageSection">
<h1>Divs with Images Section</h1>
<div class="background responsive bg-img" data-id="background2">
<div class="logo" data-id="logo2">
</div>
</div>
<div class="background medium bg-img" data-id="background2">
<div class="logo" data-id="logo2">
</div>
</div>
</div>
</div>
So, I didn't write this but now I'm trying to fix it...
I have a fixed width div which displays 5 images across it. These images are all the same size, but we want to scale them based on a css class. This is being done in drupal so actually scaling the images would be tricky and the current solution was to scale them in CSS. The problem is that when doing this, the spacing between each image is not equal.
A picture is worth a thousand words so here is a fiddle with the current implementation: http://jsfiddle.net/jCa7j/1/
And a graphical view of what I'm talking about:
So the goal here is to have this same output, but have an equal distance between each image. I've tried a lot of things and have had little luck... I've found methods for doing this with just text, or with fixed width images, but nothing that seems to do the trick here. I've also tried putting a width in pixels on .field-content and then width 100% on img so that the divs are all the same width as the scaled image but with that I still haven't been able to figure out how to get them equidistant.
I suppose doing this in javascript is an option as well. I'd prefer straight css but if it's impossible we can do it with javascript.
Any input?
Current example html:
<div id="container">
<div class="field field-1">
<div class="field-content">
<a href="/">
<img src="http://placehold.it/135x150" width="135" height="150" />
</a>
</div>
</div>
<div class="field field-2">
<div class="field-content">
<a href="/">
<img src="http://placehold.it/135x150" width="135" height="150" />
</a>
</div>
</div>
<div class="field field-3">
<div class="field-content">
<a href="/">
<img src="http://placehold.it/135x150" width="135" height="150" />
</a>
</div>
</div>
<div class="field field-4">
<div class="field-content">
<a href="/">
<img src="http://placehold.it/135x150" width="135" height="150" />
</a>
</div>
</div>
<div class="field field-5">
<div class="field-content">
<a href="/">
<img src="http://placehold.it/135x150" width="135" height="150" />
</a>
</div>
</div>
And current example css:
#container {
width: 730px;
}
.field {
width: 142px;
display: inline-block;
text-align: center;
}
.field img {
height: auto;
}
.field-1 img {
width: 70%;
}
.field-2 img {
width: 93%;
}
.field-3 img {
width: 100%;
}
.field-4 img {
width: 91%;
}
.field-5 img {
width: 79%;
}
This should be what you're after:
#container {
width: 730px;
}
.field {
display: inline-block;
text-align: center;
}
.field-1 {
width: 115px;
}
.field-2 {
width: 125px;
}
.field-3 {
width: 135px;
}
.field-4 {
width: 125px;
}
.field-5 {
width: 115px;
}
.field img {
height: auto;
width: 100%;
}
I've simplified things a bit.
FIDDLE
CSS
#container {
width: 730px;
border: 0px solid black;
}
.field {
width: 142px;
float: left;
text-align: center;
margin-left: 2px;
}
Then you just play with the margin-left, container size/position, image size etc.