I am trying to implement image thumbnail preview, using jasny fileinput control. Since my photo could require rotation, I added additional rotation button.
The issue I have got is that when image is not square and it is rotated, it is partially truncated from the thumbnail space.
Here is the JSFiddle http://jsfiddle.net/cumqod2n/
<div>
<button id="rotate" type="button" class="btn btn-default">Rotate <i class="fa fa-repeat"></i></button>
</div>
<br>
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
<img data-src="holder.js/100%x100%" alt="...">
</div>
<div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
<div>
<span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span><input type="file" name="..."></span>
Remove
</div>
</div>
just preview some image and try rotating it - see what I mean.
EDIT 1
Please find updated example here: http://jsfiddle.net/cumqod2n/4/. As you can note, I just move the "rotating" classes to fileinput div. It allows me to rotate image and show it completely. However, I have another issue - when image changes from landscape to portrait it has been overlapped by buttons below.
So my next question is - how can I adjust buttons below image accordingly?
This isn't specific to Jasny Bootstrap, but to CSS transformations.
Read Rotated elements in CSS that affects their parent's height correctly
Related
i was using fabricjs for image upload and bootstrap for css after upload the image preview is coming in the top.
When i click the image hsa to come in the right side but it's coming in the bottom.
Here is my html
<div class="container-fluid" style="border:1px solid red">
<div class="row">
<div class="col-md-6">
<img *ngFor="let item of urls" (click)="onClik(item)" [src]="item.url" class="rounded mb-3" width="180">
<input type="file" multiple (change)="detectFiles($event)">
<br/>
<h1>Preview</h1>
</div>
<div class="col-md-6">
<div id="mainarea">
</div>
</div>
</div>
</div>
Here is my stackblitz link
Example how my image is showing now
The main problem is that you are not attaching the newly created canvases to your container element (in fact, you just declare container but you don't use it at all), but to the body element. So, instead of
this.renderer.appendChild(document.body, newCanvas);
you should do
this.rendered.appendChild(this.container, newCanvas);
Also, it's likely that you will have to add display: flex to the container div, in order for the canvases to appear side by side.
Hello Please check this have changed only HTML
https://angular-ivy-mt5mbv.stackblitz.io
I am using shuffle.js on my homepage and I am trying to get my images to responsively resize like in this demo the developer posted here.
Right now I am just using media queries as a workaround, but the results are far from ideal.
Note: the grid is already responsive, what I would like to see is for the images themselves to resize as well.
You must use a CSS Grid to have a nice responsive combined with Shuttle.
Note the classes .span3 and .m-span3 on element
The example of your link is using Bootstrap v2.3.2.
You can use the Twitter Bootstrap 3 which has better semantic as well, or any other grid system.
http://getbootstrap.com/examples/grid/
If you use Bootstrap 3, add the class xs-col-12 and col-4 like so:
<div id="grid" class="shuffle">
<div onclick="window.location.href = 'IEMA.html'" class="xs-col-12 col-4 item Aston shuffle-item filtered ">
<div id="overlay">ASTON</div>
</div>
<div onclick="window.location.href = 'Aston.html'" class="xs-col-12 col-4 item Aston shuffle-item filtered">
<div id="overlay">IEMA</div>
</div>
</div>
If you don't want to include Bootstrap, you can add http://996grid.com/ with same way, using class .grid_4 shoud be fine.
Update
I can make some adjusts for your page have a better grid with shuffle changing for this style for your items when lower than 690px:
#media only screen and (max-width: 690px)
.item {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 223px;
width: 100%;
}
}
To clarify my question: I'm not looking to resize the grid, that already works.
You have already a responsive class attached to the image's container,
I want the images themselves to resize.
then you only need to add max-width:100% to the img element.
In my case :
<figure class="xs-col-12 col-4 picture-item" data-title="The Magic Box">
<div class="aspect aspect--16x9">
<div class="aspect__inner">
<img style="max-width:100%" src="/the-magic-box.png" />
</div>
</div>
<figcaption>The Magic Box</figcaption>
</figure>
I have a website about products. Each product article has text and some images in it. The images range from 400px width to some going up to 700px width. The product article is stored in a SQL Server database and the article is fetched dynamically based on the productid.
I am using Bootstrap to make my website mobile friendly. I have a two column layout. The product article is contained in a Div marked with a
class="col-md-12 row"
When I shrink the size of the page to preview how it would look in a mobile device the text nicely adjusts itself, however the images don't. Now i have about 3000 such images and if there is an attribute that I have to apply to every individual image tag, that won't be feasible.
Is there any other way using CSS or bootstrap or javascript where I can reduce the size of the image for a device size, keeping the image aspect ratio intact ?
Just add this somewhere in your stylesheet and it will apply to all images on your site.
img {
display: block;
max-width: 100%;
height: auto;
}
Bootstrap v3 and below.
Use class="img-responsive" in the image tag. This will automatically adjust the size based on the screen size. Its a bootstrap class.
Ex: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_img_responsive&stacked=h
Bootstrap v4
Use class="img-fluid" in the image tag. This will automatically adjust the size based on the screen size. Its a bootstrap class. see comment below for more details
With a Specific Width:
<img src="assets/img/why1.png" style="max-width:20%;" alt="...">
Automatic Width:
<img src="assets/img/why2.png" class="img-fluid" alt="...">
Try to this.
<div class="row">
<div class="col-md-4">
<img class="thumbnail img-responsive" src="h.jpg" />
</div>
</div>
Try adding this to css
.col-md-12 img {width:100%}
#imgdiv { width:40vw;display:table-cell;vertical-align:middle; text-align:center;}
img {max-width:100%;height:auto;max-height:100%;}
<div class="row">
<div id="imgdiv" class="col-sm-5 text-center">
<img class="thumbnail img-responsive" src="https://images.pexels.com/photos/736230/pexels-photo-736230.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
style="maxwidth:100%;height: auto;max-height: 100%;">
</div>
</div>
I have this code for uploading an image: (it's from a template that uses bootstrap 2)
<div class="span6">
<div class="control-group">
<label class="control-label">Imagen</label>
<div class="controls">
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="fileupload-new thumbnail hide" id="upload" style="width: 200px; height: 150px;">
<img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" alt="Beneficio"/>
</div>
<div class="hide fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;" id="preview"></div>
<div id="imagen">
<span class="btn btn-file">
<span class="fileupload-new hide" id="select_button">Seleccione</span>
<span class="fileupload-exists hide" id="change_button">Cambiar</span>
<input type="file" class="default" name="file"/>
</span>
Remover
</div>
</div>
</div>
</div>
</div>
I'm using "hide" on some elements because I need to hide those buttons in case javascript on client browser is not active, because it looks all messy and buttons change_button and remove_button should only appear after uploading the image. And select_button in that case should be hidden again.
So when comes to do the js code, I did this:
$('#upload').show('hide');
$('#select_button').removeClass('hide');
$('#preview').show();
$('#select_button').click(function(){
$('#select_button').addClass('hide');
$('#change_button').show();
$('#remove_button').show();
});
select_button is being hide ok, but change_button and remove_button does not appear after I use the show function.
When inspecting the code, no errors appears. So what I am doing wrong? why those buttons does not appear?
The bootstrap hide class contains display:none !important which overrides the inline display value added by the script.
For displaying the element, remove the class hide using removeClass() method as follows:
$('#upload').removeClass('hide');
$('#select_button').removeClass('hide');
$('#preview').removeClass('hide');
$('#select_button').click(function(){
$('#select_button').addClass('hide');
$('#change_button').removeClass('hide');
$('#remove_button').removeClass('hide');
});
Update:
Other than that, you are using the wrong selectors, in HTML you've id removebutton, and in script you're using #remove_button. Make sure all of your selectos are correct.
.show('hide') is not valid reference
use .hide() instead reference
jquery does not use .show('hide') read about it here. Instead use .show() and .hide()
I use bootstrap and I would like to display thumbnails of images from various sizes.
I would like the thumbnails to have all the same size (let's say width="col-md-2" wide and height="100px") and be centered and cropped.
The thumbnails have to be clickable in some way (to open the full size image or a gallery view).
The solution can use a mix of bootstrap styling or jquery or jquery components.
Ideally, I would like the code to look like this :
<div class="row">
<div class="..." style="...">
<img src="path/to/img1.png" class="..." style="..."/>
<img src="path/to/img2.png" class="..." style="..."/>
...
</div>
</div>
Or something like this :
<div class="row">
<div class="..." style="...">
<div class="..." style="...">
<img src="path/to/img1.png" class="..." style="..."/>
</div>
<div class="..." style="...">
<img src="path/to/img2.png" class="..." style="..."/>
</div>
</div>
</div>
(With the jquery initialization if necessary)
Try this..
.row {
max-height:100px;
overflow:hidden;
}
img {
width:100%;
min-height:100px;
}
Demo: http://bootply.com/92024
I don't know if you mean these examples below by "cropping."
Original photo
Cropped in fiddle
border-color: white;
border-radius: 63px;
border-style: solid;