jquery changes image size

jQuery is a JavaScript library that simplifies the traversal and operation of HTML documents, while providing some commonly used interactive effects and functions for processing data. In web development, it is often necessary to use jQuery to change the size of images. Several commonly used methods will be introduced below.

1. Use CSS styles to change the image size

Add an img tag in the HTML file and add the class attribute to it:

<img src="image.jpg" class="image">

Then in the CSS file, use width and height attributes to change the image size:

.image {
  width: 50%;
  height: auto;
}

In this way, the width of the image will be set to 50% of the width of its parent element, and the height will be automatically adjusted according to the proportion. If you want to set a fixed width and height, you can set the height attribute to a specific value:

.image {
  width: 200px;
  height: 100px;
}

2. Use jQuery’s CSS method to change the image size

jQuery’s CSS method can be on the DOM element Set CSS properties.

First, add an img tag in the HTML file and add the id attribute to it:

<img src="image.jpg" id="my-image">

Then use jQuery’s CSS method to change the image size:

$(document).ready(function() {
  $("#my-image").css("width", "50%");
});

This way, The width of the image will be set to 50% of the width of its parent element. If you want to change the width and height at the same time, you can use object literals:

$(document).ready(function() {
  $("#my-image").css({
    "width": "200px",
    "height": "100px"
  });
});

3. Use jQuery's attr method to change the image size

The size of the image can be set through the width and height attributes. Use jQuery's attr method to change the attributes of the img tag.

$(document).ready(function() {
  $("#my-image").attr({
    "width": "50%",
    "height": "auto"
  });
});

In this way, the width of the image will be set to 50% of the width of its parent element, and the height will automatically adjust according to the proportion.

4. Create a new img element

Using jQuery, you can create and insert a new img element, and then change the image size by setting its properties.

First, create a container element in the HTML file:

<div id="image-container"></div>

Then use jQuery to create a new img element and insert it into the container element:

$(document).ready(function() {
  var img = $("<img>");
  img.attr("src", "image.jpg");
  $("#image-container").append(img);
});

Finally, Use CSS or attr methods to change the image size:

$(document).ready(function() {
  var img = $("<img>");
  img.attr("src", "image.jpg");
  img.css({
    "width": "200px",
    "height": "100px"
  });
  $("#image-container").append(img);
});

Summary:

We can change images in web pages through CSS, jQuery's CSS method, attr method and the method of creating a new img element the size of. Choosing different methods according to specific needs and applying them flexibly can help us better achieve web page effects.

The above is the detailed content of jquery changes image size. For more information, please follow other related articles on the PHP Chinese website!