I've got an image which I want to use inline with some text, but I need it to match the text height. I know it's possible to something like <img src="img.jpg" height=16> or even <img src="img.jpg" height="100%">, but the former does not scale with text size and the latter seems to make it the size of the div, not the text height. Can anyone help?
Example HTML:
<body>
This is a test <img src="img.jpg">
</body>
Did you try this giving the image height as 1em?
img {height: 1em;}
Check out the fiddle here: http://jsfiddle.net/yAr7z/
Related
I am using a svg logo for my website, as shown below:
<img alt="" class="logo logo-dark" src="images/logo-dark.svg">
The svg file contains the following information about the size:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-274.1 380.7 46 41.9" width="40">
to determine the width.
Even though it is shown correctly in all browsers, in Microsoft Edge it is shown 10 times bigger.
What am I missing out?
Update: The .logo has max-width:100%
Instead of using the width in the svg, use it in the img tag like this:
<img alt="" class="logo logo-dark" src="images/logo-dark.svg" width="40">
You can also set both height and width on the svg instead of only width.
I have a figure, which contain the image. Source of image can change. So I need to change the figcaption and make it equal the title of image. Is there any way how to do it?
<figure><img id="largeImg" src="https://js.cx/gallery/img1-lg.jpg" align="middle">
<figcaption>Image caption</figcaption>
</figure>
You can do like this
$('figcaption').text($('#largeImg').attr('title'))
DEMO
I have the following lines of code in my website:
HTML:
<div class="the-post-thumbnail">
<p><img src="http://placehold.it/350x150/FF0000/FFFFFF?text=Automatic+Thumbnail" alt="" width="" height="" /></p>
</div>
<div class="post-body">
<p><img src="http://placehold.it/350x150/00FF00/FFFFFF?text=Manual+Thumbnail" alt="" width="" height="" /></p>
<p>Paragraph</p>
<p><img src="http://placehold.it/350x150/0000FF/FFFFFF?text=Body+Image" alt="" width="" height="" /></p>
</div>
JavaScript/jQuery:
var ele = $('.post-body p:has(img):first');
if ($('.the-post-thumbnail img').length) {
ele.hide();
}
else {
ele.show();
}
What I am trying to do is:
Check if there is an image within the the-post-thumbnail div and if so, hide the manual thumbnail image within the post-body
Check if there is not an image within the the-post-thumbnail div and if so, show the manual thumbnail image within the post-body
This is partially working, however, what I've noticed is that if I remove the manual thumbnail image from within the post-body div, it will remove the second body image after the paragraph tag as well.
How can I target just the manual thumbnail image which is directly within the post-body div correctly so that I can achieve the two list items above, without adding additional classes?
FYI:
This is due to swapping my website's theme for a different one. The older version required me to place in a thumbnail image for each post manually at the top of the article, and the new theme does this for me automatically. This resulted in duplicate images for older posts.
CodePen Example
Working fiddle.
Just changing the position of :first selector should do the work, because it will select always the first p and check if it has an image :
var ele = $('.post-body p:first:has(img)');
Hope this helps.
Without using any extra selectors, you could check for an image in the first paragraph.
var ele = $('.post-body p:eq(0):has(img)');
I am working on website (HTML+PHP).Here is Fiddle of what I have done so far(sharing one for example).
Each image should point to different URLs.
There are few images whose color matches the font color.I want to change font size/color as image changes. Also URL should also change automatically as image changes.
HTML:
<div class="grid">
<figure class="effect-lexi effect-chocolate">
<div id="cf3" class="shadow">
<img src="http://tympanus.net/Development/HoverEffectIdeas/img/22.jpg" alt="Image" class="bottom" />
<img src="http://tympanus.net/Development/HoverEffectIdeas/img/21.jpg" alt="Image" class="top" />
</div>
<figcaption>
<h2>Dark <span>Chocolate Smoothie</span></h2>
<p>Description</p> View more
</figcaption>
</figure>
</div>
Is it possible ? Can anyone help me with it.?
Thanks,
Using CSS3, you might be able to wield the blend mode to accomplish this.
https://css-tricks.com/basics-css-blend-modes/
Also, you would need to use the JavaScript History to change the URL.
https://developer.mozilla.org/en-US/docs/Web/API/History
Probably the simplest solution is to set the font color as an rgba. For example
color:rgba(0,0,0,.5);
As long as the images aren't black, this will adapt nicely to the color of the background. If you don't have any info from the back end, something along these lines is will probably be the way to go.
im trying to overlap to images. One of them is hidden and its show after picking in the right image in the "clipart library" section. And the other image i get is uploading it from your browser.
I have used posiotion:absolute before to overlap two images, but it doesnt work for me in this caes.
<div id="bgcolor">
<img id="thumbnil" style="width:100%; margin-top:10px;" src="" alt="" style="position:absolute;" />
<img id="tiger" src="https://openclipart.org/image/800px/svg_to_png/202300/Blue-surprised-cartoon-smiley.png" height="50" width="50" style="position:absolute;">
</div>
Here is the code in jsfiddle: http://jsfiddle.net/xq239ko9/
Make the containing div have a style position:relative;. Then make the images position:absolute; top:0; left: 0;. This makes both images appear on the same position within the parent div. Please note, that the parent div will lose it's size, as the images will be positioned outside the document flow.
Another remark:
- Try to use one style attribute per tag.
- Try to hide images by using display:none; instead of an empty src attribute
- Try to use the width and height style properties instead of tag attributes