Question posted in 
I’ve tried soo many ways changing the margin and other things in my css in my code but nothing works.
The only thing that i am asking is where should i change the code to make my pictures orientation after I upload from vertical to horizontal.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Defekt</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<style>
label textarea{
vertical-align: top;i
}
div { text-align: left; }
.thumbnail {
display: block;
margin-bottom: 10px;
}
.gallery {
display: flex;
flex-wrap: wrap;
margin-top: 10px;
}
.gallery > div {
margin-right: 10px;
}
.gallery img {
display: inline-block;
object-fit: cover;
margin: 5px;
}
.slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 25px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #04AA6D;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #04AA6D;
cursor: pointer;
}
</style>
<h1 align="center"> DATABASE </h1>
<h3> <b>Diametri i gypit: </b> </h3>
<div class="slidecontainer">
<input type="range" min="63" max="1800" value="63" class="slider" id="myRange">
<h4 align="left"> fi ɸ : <span id="demo"></span> mm</h4>
</div>
<label for="lang"><b> Materiali Gypit </b> </label>
<select name="Materiali" Id="lang">
<option value="Azbest">Azbest</option>
<option value="GRP">GRP</option>
<option value="Pllastik">Pllastik</option>
<option value="Heker Cingtun">Heker Cingtun</option>
</select>
<div>
<p> <b> Anëtarët: </b></p> <textarea rows="5" cols="20" ></textarea>
</div>
<label>
<p><label for="w3review" value="Fshati"> <b> Fshati: </b></label></p>
<textarea id="w3review" name="w3review" rows="2" cols="20"> </textarea>
<form action="/action_page.php">
<p><label for="w3review" value="Përshkrimi"> <b> Përshkrimi: </b> </label></p>
<textarea id="w3review" name="w3review" rows="4" cols="80"> </textarea>
<! -- Upload picture -->
<p> <b> Ngarko foto: </b> </p>
<input type="file" accept="image/*" onchange="showMyImage(this)" multiple id="gallery-photo-add" />
<br/>
<div class="gallery"></div>
<br/>
<img id="thumbnil" src="your_image_url" width="300" height="200" alt="image"/>
<br>
<br>
<br>
<br>
</br>
</br>
<button class="button-print-or-save-document">Ruaj</button>
<script>
<!-- Ruaj Foton -- !>
function showMyImage(fileInput) {
var files = fileInput.files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
var imageType = /image.*/;
if (!file.type.match(imageType)) {
continue;
}
var img=document.createElement("img");
img.style.width = "20%";
img.style.marginTop = "10px";
img.alt = "image";
img.classList.add("thumbnail");
var reader = new FileReader();
reader.onload = (function(aImg) {
return function(e) {
aImg.src = e.target.result;
};
})(img);
reader.readAsDataURL(file);
var gallery = document.querySelector(".gallery");
var div = document.createElement("div");
div.style.display = "inline-block";
div.appendChild(img);
gallery.appendChild(div);
}
}
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
const buttonPrintOrSaveDocument = document.querySelector(
".button-print-or-save-document"
);
function printOrSave() {
window.print();
}
buttonPrintOrSaveDocument.addEventListener("click", printOrSave);
</script>
</body>
</html>
If anyone could help me I’d appreciate that.
2
Answers
You can use CSS to rotate images uploaded to change their orientation from vertical to horizontal. To rotate the image, add the following CSS to your code:
You can try this way:
in above code i have made change in css part.
if I understand your issue correctly then you want to display image horizontally after upload.