Question

我的网页中有一段包含媒体，主要是图片。我希望用户能够将图片重新调整为他/她想要的大小。如果可能，我希望用户可以拖动角落来重新调整图片大小。
以下是演示：https://jsfiddle.net/anstw7Lu/
这是HTML：

SELECT user_defined_function(USER_DEFINED_CONSTANT)

Answer 1

CSS3

您可以使用名为 Box Resizing 的新CSS3功能。您应该将其添加到样式表中：

img {
  resize: both;
  overflow: auto;
}

参考： http://www.w3schools.com/cssref/css3_pr_resize.asp

您可能还想考虑使用 JavaScript ，它可能具有更广泛的浏览器支持。您可以使用jQuery UI：https://jqueryui.com/resizable/

Answer 2

要从用户端创建调整大小元素或图片，您需要使用允许您调整元素大小的 Resizable

＆＃13;

$(function() {
    $( "img" ).resizable();
  });

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 3

使用<div>将您的图片作为背景，然后通过CSS调整大小。

＆＃13;

.image {
  width: 130px;
  height: 100px;
  background-image: url('http://circleofdocs.com/wp-content/uploads/2014/10/bigstock-Coconut-isolated-on-white-back-70653349.jpg');
  background-size: contain;
  border: 1px solid lightgray;
  background-repeat: no-repeat;

  resize: both;
  overflow: auto; 
}

＆＃13;

<div class="image"></div>

＆＃13;

允许用户调整页面上的图像大小

3 个答案:

CSS3