I have a section of my webpage that contains media, mostly pictures. I want the user to be able to re-size the picture to whatever size he/she wants. I was hoping the user would be able to drag a corner to re-size the picture if that is possible.Here is the demo: https://jsfiddle.net/anstw7Lu/ Here is the HTML:
<div id="media-section">
<!--Title -->
<div id="media-title">Media</div>
<div id="media-button" class="button-container">
<!-- The panel that will display the content -->
<div id="media-content"><br><br>
Here is my picture<br><img src="http://circleofdocs.com/wp-content/uploads/2014/10/bigstock-Coconut-isolated-on-white-back-70653349.jpg" height=200px width=200px>
<br> I want to be able to resize this picture, make it larger, smaller, ect.
</div>
</div>
CSS3
You can use a new CSS3 feature called Box Resizing. You should add this to your stylesheet:
img {
resize: both;
overflow: auto;
}
Reference: http://www.w3schools.com/cssref/css3_pr_resize.asp
You might also want to consider using JavaScript, which may have wider browser support. You can use jQuery UI: https://jqueryui.com/resizable/
To create resize element or image from user side, you need to use Resizable which allow you to resize an element
$(function() {
$( "img" ).resizable();
});
#media-section{
float:left;
text-align: center;
height:500px;
width: 250px;
border-style: solid
}
#media-title{
height:6%;
width:100%;
float:left;
font-size:24px;
}
#media-button{
height:4%;
width:100%;
float:left;
border-style: solid;
border-top: none;
border-left: none;
border-right: none;
}
#media{
width:100%;
height:92.5%;
float:left;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="media-section">
<!--Title -->
<div id="media-title">Media</div>
<div id="media-button" class="button-container">
<!-- Button that when clicked activates a dalog box for the passage. -->
<button id="max-media" class="max"></button>
</div>
<!-- The panel that will display the content -->
<div id="media-content">
Here is my picture<br><img id="resizable" src="http://circleofdocs.com/wp-content/uploads/2014/10/bigstock-Coconut-isolated-on-white-back-70653349.jpg" height=200px width=200px>
<br> I want to be able to resize this picture, make it larger, smaller, ect.
</div>
</div>
Use a <div> with your image as a background and then allow resizing through CSS.
.image {
width: 130px;
height: 100px;
background-image: url('https://picsum.photos/id/203/130/100');
background-size: contain;
border: 1px solid lightgray;
background-repeat: no-repeat;
resize: both;
overflow: auto;
}
<div class="image"></div>
Related
I have a page with a title, paragraph and a single image, that can be of very different sizes/aspect ratios.
I would like the image to adapt so that it will either fill maximum available height, or be limited by its width, without loosing aspect ratio, neither causing scrolling.
this is my basic config:
angular.module("myApp", ["ngMaterial"]);
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc7/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc7/angular-material.min.js"></script>
<div ng-app="myApp" layout="column" layout-fill>
<div flex style="background: red;">
<h1>Title</h1>
<p>Details. Blablabla.</p>
</div>
<div flex="60" style="background: blue;" object-fit="fill">
<img id="myImg" ng-src="http://placehold.it/200x400"/>
<!-- Should work with such extreme case as well -->
<!-- <img id="myImg" ng-src="http://placehold.it/1000x200" /> -->
</div>
</div>
I have looked at a lot of SO posts, websites, blogs, etc. I can't figure out where to start to get this done. Most articles about fluid images or responsive images only talk about scrollable web pages. So even a good reference on the topic would be helpful. Thank you.
EDIT: Updated the snipped to use flex layout. As you can see, the image goes outside the blue div bounds. I have used object-fit="content"; or object-fit="fill"; but none seems to constraint the image to respect div bounds
It can be done by object-fit(it doesn't support IE) and css calc(it supports most of broswer).
What did you do?
I wrap image by a div(.wrapper), calculate height of it by css calc.
height: calc(100vh - 19px - 38px); //100% of viewport - height of p - height of h1
and then use object-fit to image is fitted the height of .wrapper by keeping the ration of image.
Image by high height
angular.module("myApp", ["ngMaterial"]);
h1,
p {
padding: 0;
margin: 0;
}
.wrapper {
width: 100%;
height: calc(100vh - 19px - 38px);
}
img {
object-fit: fill;
height: 100%;
max-width: 100%;
display: block;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc7/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc7/angular-material.min.js"></script>
<div ng-app="myApp" layout="column" layout-align="center center" style-parent>
<h1>Title</h1>
<p>Details. Blablabla.</p>
<div class="wrapper">
<img id="myImg" ng-src="http://placehold.it/200x400" />
<!-- Should work with such extreme case as well -->
<!-- <img id="myImg" ng-src="http://placehold.it/1000x200" /> -->
</div>
</div>
Image by less height
angular.module("myApp", ["ngMaterial"]);
h1,
p {
padding: 0;
margin: 0;
}
.wrapper {
width: 100%;
height: calc(100vh - 19px - 38px);
}
img {
object-fit: fill;
height: 100%;
max-width: 100%;
display: block;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc7/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc7/angular-material.min.js"></script>
<div ng-app="myApp" layout="column" layout-align="center center" style-parent>
<h1>Title</h1>
<p>Details. Blablabla.</p>
<div class="wrapper">
<!-- <img id="myImg" ng-src="http://placehold.it/200x400" /> -->
<!-- Should work with such extreme case as well -->
<img id="myImg" ng-src="http://placehold.it/1000x200" />
</div>
</div>
I would use css properties like "background-size:cover". Here is an example. First 2 containers use the "cover" approach on 2 containers with different aspect ratio without altering the image ratio. The third one uses "pixel dimensions". Remember that if u alter either x or y axis dimensions do only so on one of them and define the other as auto in order to not alter the image ratio(like hover effect does on third container).
fiddle:
https://jsfiddle.net/coolcatDev/0111sfmg/2/
HTML:
<div class="container1">
</div>
<br>
<div class="container2">
</div>
<br>
<div class="container3">
</div>
CSS:
.container1 {
background-image:url('http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg');
background-repeat:no-repeat;
background-size:cover;
height:300px;
width:300px;
border:2px solid green;
}
.container2 {
background-image:url('http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg');
background-repeat:no-repeat;
background-size:cover;
height:600px;
width:200px;
border:2px solid green;
}
.container3 {
background-image:url('http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg');
background-repeat:no-repeat;
background-size:cover;
background-position:center;
height:200px;
width:300px;
border:2px solid green;
}
.container3:hover {
background-size: 450px auto;
}
You can define this in your stylesheet, inline, inside custom directive, ng-style or whatever suits you best.
Browser support:
http://www.w3schools.com/cssref/css3_pr_background-size.asp
I'm trying to make a simple page where there are several rows of images, each one with a horizontal scrolling (using Nicescroll 3).
Using the mouse, when the horizontal scrolling of the row is finished, the mouse wheel has no function. What I wanted to do is that the page continued scrolling vertically after the horizontal scrolling has finished.
My code:
HTML:
<div id="main-content">
<div class="row">
<div class="square-container">
<div class="square"></div>
</div>
<!-- several other square-container divs -->
<div class="square-container">
<div class="square"></div>
</div>
</div>
<div class="row">
<!-- several other square-container divs -->
</div>
<!-- several other rows -->
</div>
</div>
CSS:
#main-content{
min-height: 100%;
height: auto;
}
#main-content > .row {
overflow-x:scroll;
overflow-y:hidden;
white-space:nowrap;
}
.square-container {
float:none;
display:inline-block;
margin: 20px 30px 5px 30px;
}
.square{
height: 100px;
width: 100px;
border: 1px solid black;
}
Here's my Fiddle
Thanks for feedback.
Added to TODO list.
Issue opened -> https://github.com/inuyaksa/jquery.nicescroll/issues/451
can you please tell me how to add hidden div or button behind the button?Actully I need to increase the click area without increase the x image size so that user can click in whole area.?
here is my code
<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div data-role="page" id="wrapper">
<button id="openPopup">openPOP</button>
<div data-role="popup" data-dismissible='false' id="testCaseId" data-theme="b" data-overlay-theme="a">Close
<div data-role="fieldcontain">
<label for="testCaseIDValue">TestCase Name:</label>
<input type="text" name="testCaseIDValue" id="testCaseIDValue" value="" class="inputTextTestCase" />
</div>
Done
</div>
</div>
</body>
</html>
js Code
$(function(){
$('#openPopup').click(function(){
$( "#testCaseId" ).popup( "open" );
})
})
Use the close icon as a centered background image of a larger element.
HTML
CSS
a {
display: block;
background: url("http://icons.iconarchive.com/icons/custom-icon-design/mini/24/Close-icon.png") no-repeat center center #eee;
width: 50px;
height: 50px;
}
Demo: http://jsfiddle.net/eAxb8/
Try setting a <div> that acts as a container for the button graphic and is the same color as your background, but clickable.
For example,
<a href = "whatever.com">
<div id="hidden_button">
<div id="button_graphic">
Button Text
</div>
</div>
</a>
stylesheet.css
a {
text-decoration: none;
}
#hidden_button {
background: #ffffff;
width: 300px;
height: 300px;
}
#button_graphic {
width: 150px;
height: 150px;
border: 4px solid black;
border-radius: 5px;
color: #ffffff;
text-align: center;
background-color: #F38630;
margin: auto;
margin-top: 75px;
}
If I've done my CSS correctly, this should create a square button with rounded edges that is 150px by 150px, with a container around it that is 300px by 300px and appears invisible, but is still clickable. Adjust the sizes to meet your needs.
To me, it seems like you look for an invisible area that acts like a button.
See the following fiddle. To remove the blue color, just delete the code style="background-color:lightblue"
http://jsfiddle.net/p943a/2/
I have two divs. One div contains an image, and the other will contain a text caption that will be layed over the image.
How can I make the caption div width be equal to the image div in a fluid design?
The page is designed using a fluid layout and thus the image will can size with the browser size is changed.
<div id="captions">Captions</div>
<div id="image"></div>
Is there a way to do this in CSS?
You could put both elements into your div and then set the width
<div id="yourdiv">
<img id="yourimg" src="" />
<p class="yourtext">Here some Text</p>
</div>
and then set the width of .yourtext
.yourtext {
width: 100%;
}
FIDDLE
We may inverse the situation as follows:
HTML
<div id="captions">
Captions..
<div id="image"><img src="http://lorempixel.com/450/200/" /></div>
</div>
CSS
#captions{
background: #000;
color:#fff;
/* width:100%;*/
display:inline-block;
padding-bottom: 0px;
margin-bottom: 0px;
}
#image{
width: 100%;
padding-bottom: 0px;
margin-bottom: 0px;
}
#image img{
vertical-align: bottom;
}
This is a DEMO
How to align two pictures so that they are center of the div when using JqueryMobile and as far from the both sides? --p--p--
<div class="ui-grid-a" style="margin: 10px;"">
<div class="ui-block-a" id="pic" align="center">
<img src="images/image1_100x100.jpg" data-theme="c" id="pictureId"/>
</div>
<div class="ui-block-b">
<label> </label>
</div>
<div class="ui-block-c" id="pic" align="center">
<img src="images/image2_100x100.jpg" data-theme="c" id="pictureId2"/>
</div>
</div>
<style>
div#pic { color:red; border:4px solid grey; border-radius: 15px; width:130px; height:130px
text-align:center; background-color: white; margin: 0 auto;}
</style>
Second question is that what is the correct way to make a gap between divs? I am using now empty div, but I think that there might be something better?
Cheers,
Sami
You can always add css to that and overwrite the JQM stuff when you insert your css after the JQM css links.
I took your code and modified it a little bit so it should give you a starting pont. I don't know if any of your or JQM css interferes with that as I can't try out right now.
The CSS in my case is in no way smaller because of all the compatibility css (prefixed properties). But the advantage is that box layout is a lot more flexible in that it also allows to center the content in 2 directions and also allows for sorting and alignment.
http://www.w3.org/TR/css3-flexbox/
This is just an alternative.
http://dabblet.com/gist/3132163
I got it working. I guess it is not so sophisticated solution, but it is working.
.pics {
background-color: white;
border-radius: 15px;
border: 4px solid grey;
height: 130px;
padding: 0px;
text-align: center;
width: 130px !important;
}
.picLeft {
float:left;
margin-left: 10px !important;
}
.picRight {
float:right;
margin-right: 10px !important;
}
I am open to any better solutions and thanks Torsten!
Sami