try setting the image to display: block or display:inline-block.
inline-block might not be supported. if an image is display: inline, then height and width properties won’t affect the image. Also recommended to only set width to maintain aspect ratio.
.icon1 {
width: 100px;
height: 100px;
display: block;
}
.icon2 {
width: 110px;
height: 110px;
display: inline-block;
}
.icon3 {
width: 120px;
display: block;
}
/* extra styles for example */
img {
margin: 4px;
}
<div class="wrap">
<!-- div not required, just to wrap image in this example -->
<img src="https://placekitten.com/130/130" class="icon1">
<img src="https://placekitten.com/128/128" class="icon2">
<img src="https://placekitten.com/132/132" class="icon3">
</div>
Edit:
Using a div with a background image set with background-image: url(path/to/image/file) might work if you set the divs height and width.
Okay, so I am working on a “chat window” in Java that’s built with HTMLEditorKit. The general approach is that I first build up a stylesheet using StyleSheet.addRule(). The stylesheet I build up is:
body {color:#ff00ff; font-family:SansSerif; font-size:12pt;}
p {color:#ff00ff; font-family:SansSerif; font-size:12pt;}
.msg {color:#ff00ff; font-family:SansSerif; font-size:12pt;}
.csa {color:#ff0000; font-family:SansSerif; font-size:12pt;}
.usa {color:#0000ff; font-family:SansSerif; font-size:12pt;}
.icon {width:16px; height:16px; object-position:0 5px; }
Then, when I have a chat line I want to apply, I put it in a div and add it to the JTextPane:
try {
kit.insertHTML(doc, doc.getLength(), "n<div class="+style+">" + s + "</div>", 0, 0, null);
} catch (BadLocationException ble) {
ErrorDialog.bug(ble);
} catch (IOException ex) {
ErrorDialog.bug(ex);
}
conversation.update(conversation.getGraphics()); //Force update of graphics
So far, this is all working fine! Next, there is the issue of wanting to be able to add little images into the text.
Adding the images themselves goes along fine too, as long as I stick to html attributes, e.g.:
<img src="dice.png" width="16" height="16">
BUT, as soon as I try to do EITHER of the following two things, it IGNORES all my styling:
<img src="dice.png" class="icon">
<img src="dice.png" style="{width:16px; height:16px; object-position:0 5px; }">
I have tried all sorts of workarounds including span tags, I have tried id styling (e.g. #icon and id=”icon”), separate divs, etc. No joy!
This is an add-on to some legacy software running under a pretty old version of Java (1.8), so I’m always “expecting the worst”, but as I say all the other CSS style elements (as far as text and layout go) are working perfectly. Looking for any troubleshooting hints, OR if there are somehow special HTMLEditorKit limitations with images (but again all my images work great as long as I stick with html attributes instead of CSS, and yet all my CSS works fine with text). Many thanks for any help.
The basic answer is that only a subset of HTML3.2 is supported. Don’t know if what you want to do is supported or not. I would suggest you use a JTextPane and use the text attributes and paragraph attributes to style your text. An example is provided in the link to your last question.
As far as the earlier question– the answer that’s up there didn’t actually help, or rather it was helpful but didn’t lead me to the solution to my actual problem. I eventually found a semi-answer elsewhere (needed to generate an explicit URL e.g. with ClassLoader or the like) and managed to get it going. I was going to wait a few days and see if anyone happened to provide an answer of that form so I could accept it, otherwise add an answer myself. I do appreciate you stopping by and trying to help though.
1) comments like that should be added to the original question so people know you actually read the suggestion, otherwise what is the incentive help in the future. 2) The demo code from the tutorial works without any special code or class loader. 3) if you use a different solution then feel free to post your own answer. 4) Post an
Thanks I will note that there. For this question, there are strong incentives for me to get this running in HTMLEditorKit specifically, for leveraging html. So I’m hoping for either specific knowledge of HTMLEditorKit’s limitations (e.g. if someone knew that it could not and should not use CSS for images), or best of all someone who could spot or suggest something I’ve “done wrong” to get image styling going. I did a bunch of searching around and couldn’t find anyone with THIS problem, which made me think maybe I’m “leaving one thing out”.
Alas, no joy. Tried generating your exact styles, also tried putting the e.g. display:block; in a style=”…” attribute for the img tag. For some reason I can’t get the window to accept styling on the image — it accepts all the style/class/etc stuff just fine for the text elements. And it accepts attributes like width=”16″ just fine for images. Good point on aspect ratio — my original images in this case were squares but I should really just force the height (which is the important constraint for me) and let the width be auto-conformed.
Also only supports html 3.2, so css supported is not the greatest.
