Jquery设置图像大小点击按钮 - jquery set image size on click of button

jquery set image size on click of button

本文关键字：按钮设置图像 Jquery | 更新日期: 2023-09-27

我正在上传图像，我可以选择图像的大小，以英寸和厘米为单位。当用户选择英寸时，div显示的按钮大小如15* 12,30 *20，当用户选择厘米时，div显示为38cm*28cm, 78cm * 56cm。Div是在点击英寸和厘米按钮时出现的。但是我如何根据所选按钮来设置尺寸呢?我希望当用户选择15*12，然后图像在div中带有这个大小。这是显示和隐藏英寸和厘米的div的代码。

$(function () {
    var tabContainers = $('div.tabs > div');
    $('div.tabs ul.tabNavigation a').click(function () {
        tabContainers.hide().filter(this.hash).show();
        $('div.tabs ul.tabNavigation a').removeClass('selected');
        $(this).addClass('selected');
        return false;
    }).filter(':first').click();
});

解析底部和的内容设置图像大小-

$("#imageID").attr("width",width);
$("#imageID").attr("height",height);

用英寸和厘米等不同的单位设置宽度和高度是完全合法的。你所要做的就是说"3in"代表3英寸，或者"10cm"代表10厘米。(你可以在CSS和jQuery中这样做。)

/* valid CSS */
img {
    width: 3in;
}

// valid jQuery
$("img").width("3in");

下面是一些简单的HTML和jQuery，看看如何设置响应点击事件的大小。

<img id="myImg" src="path/to/image.jpg" alt="...">
<button data-width="15in" data-height="20in">15 x 20</button>
<button data-width="20in" data-height="30in">20 x 30</button>

// Every time a <button> is clicked, resize the image to the dimensions
// given in the data-width and data-height attributes.
$("button").on("click", function () {
    var $button = $(this);
    $("#myImg").width( $button.data("width") ).height( $button.data("height") );
});