This seems simple enough but I am trying to override a style class on an image tag.
A user uploads content and images using the CKEditor wysiwyg. The issue is if the user doesn't resize the image before posting and then I try to show their HTML on the page the image is wider than the container.
How can I override it with CSS?
<p class="post-content text-muted break-text mb-none">
<p><img alt="" src="https://example.com/1234.png" style="height:1598px; width:1594px" /></p
</p
I tried this css but couldn't override it.
<style>
.post-content img {
width:400px !important;
}
</style>
Since this is user-generated content, I can't add a class directly to the img otherwise I would, if that makes sense. Thanks
Your HTML has a <p> tag inside a <p> tag so would likely have rendered as two separate paragraphs, and the one containing the image wouldn't have the .post-content class on it.
Aside from that, you might be best of with this CSS, as this will keep the image at 100% width but no larger than its actual size.
.post-content img {
max-width: 100%;
height: auto !important;
}
Related
TL;DR : Before you read anything, the desired end-result is illustrated in the image below, otherwise refer to the JSFiddle. Preferably, I would like to only use CSS and not modify the DOM structure.
The icons must be aligned completely to the right (hence the .pull-right), but the icons must be stacked vertically (Sometimes some icons must not appear, so they are .hidden, like the .fa-undo icon in the second row).
(When I say 'the icons' i mean the <i> tags and the <img> tag)
The icons must not make the textarea go down (no margin on top of the textarea).
Hopefully, the WIDTH of the textarea would be dynamic and not statically put to width: 90%; for example. It should take as much width as possible, without interfering with the vertical icon stack.
Here is the end result that I want (in a perfect world this would be done using CSS and the same HTML DOM I provided)
In general, images that are UI elements, and not content, should be CSS backgrounds, not inline images. You then use class names to control the image content.
You should be doing this, or something similar:
td.fr {
background-image:url(/images/fr.gif);
background-repeat:no-repeat;
background-position: top right;
}
The same should go for your buttons. Use <button> and style the background.
Not exactly what you wanted I'm afraid, but this is how I'd achieve that result:
fiddle
<div class="pull-right icons">
<img src="http://www.convertnsftopst.net/images/gb.gif" class="pull-right" />
<i class="fa fa-reply"></i>
</div>
td .icons{
width:20px;
text-align:center;
}
Here is the end result that I want (in a perfect world this would be done using CSS and the same HTML DOM I provided)
I was unable to do it without adding another pull-right container, I fear that doing it with only CSS would end up being an odd hack
Fixed here : http://jsfiddle.net/QTXxp/2/
What was lacking when I asked this question was the clear:right; and the use of <div> (or display: block;)
Here is the CSS (if you're too lazy to open the JSFiddle) with the addition of the boostrap class pull-right on the div.icons
textarea.hover-edit {
width: 90% !important;
}
div.icons {
width: 10% !important;
}
div.icons > div > i.fa {
margin-top: 4px;
margin-right: 4px;
}
div.icons > div.action-icon-right {
float:right;
clear:right;
}
www.angelodias.com.br/blog
My blog has a featured image inside a slider and several images through the post. To solve a problem (images on post bigger than column) I did this:
img {
max-width:450px;
height:auto;
}
The problem is: this code also changes my slideshow max-width to 450px, and that's not good. Is there a way for the CSS to work ONLY inside the post's text?
Example:
<div class="slideshow"> slideshow without custom IMG css, only template css </div>
<div class="entry-content"> post content with custom IMG css and template css</div>
You can try targeting the images use the entry-content container
.entry-content img {
// ....
}
If you use img tag, it will target all images on the page, where .entry-content img will only target the images inside of entry-content elements and that's where your images are and slide show are not.
WordPress allows to add max-width to images, simply go to Settings -> Media
or you can just select the images inside of your content, this should work:
.entry-content img {
max-width: 450px;
height: auto;
}
I have a <article class="media-post"> tag.
Is there anyway to force any <img> tag to inherit the max width defined by the media-post class?
Or does any image in the article need to specifically be of class media-post to get the desired effect?
In short I dont want to have to say <img class="media-post" every time.
Just put the following in you CSS:
.media-post img {
max-width: inherit;
}
I have an html img that is being styled by a CSS class. I would like to override the width and height values used in that class under some circumstances.
I'm building this img tag using something called a TagBuilder class, provided by Microsoft for the .Net system, which allows developers to assign attributes to an html element.
In this case a CSS class has been assigned to the img tag, and I can assign width and height attributes individually, but they're not taking precedence over the values set in the CSS class.
My tag looks like this currently:
<img alt="my link" class="static" height="240" id="StaticImage" src="http://imageserver.com/myImage.jpg" width="240">
The static CSS class has width and height values of 300 each, and as you can see I'm trying to override them with 240. It's not working in this instance but can I do it without a second CSS class?
You can add a style attribute to your img:
<img alt="my link" class="static" height="240" id="StaticImage"
src="http://imageserver.com/myImage.jpg" width="240"
style="height:240px;width:240px;">
You can either use inline css
<img alt="my link" style="width:240px; height:240px;" class="static" id="StaticImage" src="http://imageserver.com/myImage.jpg">
OR
in your css, you can define the style with a !important modifier
.static {
width:240px !important;
height:240px !important;
}
That way, regardless of everything, your width, height will always be used.
Try narrowing down your element selection as much as you can. The more specific, the better chances you have to override a declaration. Per example, add the class AND the ID of the element:
#StaticImage.static {
height: 240px;
width: 240px;
}
You can even go crazy and add its attribute:
#StaticImage.static[alt=my link] {
height: 240px;
width: 240px;
}
If it fails, raise its priority:
#StaticImage.static {
height: 240px !important;
width: 240px !important;
}
You can make it even more specific by including its parent element. Can inline css override everything else? Sure, but if you can add inline css, why don't you add another class instead to narrow your selection even more? That way you can control all your css within your file.
Also, check if there's a line of JavaScript forcing the element's size. JavaScript can alter the css value, no matter what it is.
I have a feeling this is another impossible request, but... Is it possible to override the width of an iframe friend selector element using only an external stylesheet?
I have a page that uses the iframe friends selector, but I cannot edit the HTML in any way, or use JavaScript. The code looks essentially like this in Firebug:
<div id="container">
<fb:serverfbml class="fb_iframe_widget" width="718px">
<script type="text/fbml">
<span>
<iframe id="fdf5a6b542baf6" class="fb_ltr" scrolling="no" name="f19fe08b5aec2e4" style="border: medium none; overflow: hidden; width: 718px; height: 555px;" src="about:blank">
</span>
</fb:serverfbml>
</div>
The issue is that my container is only 500px wide, and hides any overflow:
#container { width:500px; overflow:hidden; }
Which results in the invite box being cut off.
I have managed to override the inline styles on both the fb control and the iframe like this:
.fb_iframe_widget[style], #container iframe[style] {
width:500px !important; /* yes, I know, but it really doesn't work otherwise */
}
But inside the iframe there is an element called #fb_multi_friend_selector that is being forced to a width of 718px by a CSS file ending in a PHP extension. I'm assuming that this is a dynamic CSS file that is somehow reading the style attribute of the iframe and forcing that width value, but I have no idea how to override it from my stylesheet. Is it possible to do this?
You cannot access the contents of an iframe that is not from your own domain due to the same origin policy. This is to prevent cross-site scripting attacks.