SyntaxFix

[css] How to put an image in div with CSS?

With Javascript/Jquery:

  • load image with hidden img
  • when image has been loaded, get width and height
  • dynamically create a div and set width, height and background

  • remove the original img

      $(document).ready(function() {
    var image = $("<img>");
    var div = $("<div>")
    image.load(function() {
      div.css({
        "width": this.width,
        "height": this.height,
        "background-image": "url(" + this.src + ")"
      });
      $("#container").append(div);
    });
    image.attr("src", "test0.png");
  });

Examples related to css

• need to add a class to an element • Using Lato fonts in my css (@font-face) • Please help me convert this script to a simple image slider • Why there is this "clear" class before footer? • How to set width of mat-table column in angular? • Center content vertically on Vuetify • bootstrap 4 file input doesn't show the file name • Bootstrap 4: responsive sidebar menu to top navbar • Stylesheet not loaded because of MIME-type • Force flex item to span full row width

Examples related to image

• Reading images in python • Numpy Resize/Rescale Image • Convert np.array of type float64 to type uint8 scaling values • Extract a page from a pdf as a jpeg • How do I stretch an image to fit the whole background (100% height x 100% width) in Flutter? • Angular 4 img src is not found • How to make a movie out of images in python • Load local images in React.js • How to install "ifconfig" command in my ubuntu docker image? • How do I display local image in markdown?