Change icon image size on SweetAlert

问题

I'm trying for change icon image size on SweetAlert. In the .css file I see:

.sweet-alert .sa-icon {
    width: 80px;
    height: 80px;
    border: 4px solid gray;
    -webkit-border-radius: 40px;
    border-radius: 40px;
    border-radius: 50%;
    margin: 20px auto;
    padding: 0;
    position: relative;
    box-sizing: content-box; }

I have changed this values:

 width: 80px;
 height: 80px;

But not change nothing. My .png file is showed in a predefinite size. Suggestions?

回答1:

use the "imageSize" object class in your controller.

  swal({  title: "Oops...",
          text: "Please have a title and body in your post.",
          imageUrl: "../../../img/oopsface.png",
          imageSize: '600x600'
  });

(if you want to modify your sweet alert in this way, you need to use this formatting to call the alert)

回答2:

swal({
  title: "Oops...",
  text: "Please have a title and body in your post.",
  imageUrl: "../../../img/oopsface.png",
  //instead of imageSize use imageWidth and imageHeight
  imageWidth: 600,
  imageHeight: 600,
});

回答3:

It works fine for me. Try removing .sa-icon.

.sweet-alert  {
    width: 80px;
    height: 80px;
    border: 4px solid gray;
    -webkit-border-radius: 40px;
    border-radius: 40px;
    border-radius: 50%;
    margin: 20px auto;
    padding: 0;
    position: relative;
    box-sizing: content-box; }

<img src="http://placehold.it/350x150" class="sweet-alert">

回答4:

In my case, my img class was overwriting imageWidth and imageHeight. For solving this I had to add a custom class on the swal init like this:

swal({
    title: "Title",
    text: "Swal text",
    imageUrl: "/example/image.png",
    imageClass: "contact-form-image",
    confirmButtonText:"Ok",
});

And define a the class on your style.css:

.contact-form-image {
    width: 144px;
    height: 144px;
}

回答5:

'imageHeight' for image height and 'imageWidth' for image width

swal({        
    title: 'Alert!',        
    text: 'Content',        
    imageUrl: 'assets/images/user.png',        
    imageHeight: 80, 
    imageWidth: 80,       
    imageClass:'img-responsive rounded-circle',        
    animation: false        
});

'title' for alert title
'text' for alert content
'imageUrl' for embed image url from website
'imageHeight' for image size(height)
'imageWidth' for image size(width)
'imageClass' for your custom image class/other class added

HTML Output like

<img src="assets/images/user.png" class="img-responsive rounded-circle" height="80" width="80" >

回答6:

for current versions, what is mentioned no longer works, for buttons and image

taste this

swal({
      title: "Search...",
      text: "please, wait",
      icon: "../../images/gif/blue.gif",
      buttons: false,
      closeOnClickOutside: false
    });

and this

.swal-icon img{
  width: 120px;
  height: 120px;
}

回答7:

I FIND THIS TO SOLVE MY PROBLEM

swal({
  title: "Oops...",
  text: "Please have a title and body in your post.",
  imageUrl: "../../../img/oopsface.png",
  //instead of imageSize use imageWidth and imageHeight
  imageWidth: 600,
  imageHeight: 600,
});

来源：https://stackoverflow.com/questions/32238017/change-icon-image-size-on-sweetalert

标签

css

image

icons

size

alert