We're using Umbraco v7.2.1 to serve what is supposed to be responsive content.
When you add an image from the media library to the tinymce editor, this is the html that is inserted by tinymce:
<img style="width: 500px; height:500px;"
src="/media/1007/jobs-block.jpg?width=500&height=500" alt="undefined" rel="1097" />
I really don't want ANY w x h in the tag or image src.
I have found a couple of posts regarding the tinyMce.config file and the validElements node - i removed the height and width things from the img thing in there but that had no effect.
If you open the Data Type for the Richtext editor in question there is a setting called "Maximum size for inserted images". This is by default set to 500 pixels.
If you set it to 0 it will disable any resizing.
I think you can have your cake and eat it too, no need to restrict editor re-sizing.
Adding the following properties to your img elements: max-width: 100%; height: auto !important; will allow content editors to re-size their images while also making them responsive.
I processed the output. I removed the height and wrap images by a div by javascript and I can fully customize it via css
Related
In doxygen documentation for \image doxygen documentation for image, it does not say anything about using percentage. However, the followings
\image html some.png width=50%
actually resizes the image to 50% of the page width.
In my case, I would like to resize images to 50% of their original sizes in stead of the page width. Is there a way to achive that?
EDIT:
I am using doxygen version 1.8.17, and my output format is HTML.
Doxygen is giving the width verbatim to the underlying renderer. In the HTML the image tag looks like to specify for the width, officially, only pixels so it is up to the browser what to do with it. I did some investigations and it looks like in the css there are some possibilities with transform: scale(0.5,0.5); or transform: scaleX(0.5);
This won't work with the \image command, but does work with the <img> doxygen HTML command, so you could use:
<img src="some.png" alt="" style="transform: scale(0.5,0.5);" />
Edit: Added a quote mark before some.png.
how to crop image for email template? I have an image that is of particular width (example 520px). I want to ensure that the height is never more than 150px. This is for email only... If I use max-height or just height css, then it gets pixelated? What other better option do I have?
Ideally, you would crop the image (either manually or programmatically), and have it stored somewhere (on a CDN), where you can embed the image, and it will display as intended.
If this ^ isn't an option, your limitations are based on what email clients you need to support.
I am using Campaign Monitor CSS as a reference.
Option 1: If you aren't concerned with supporting Outlook.com and/or Outlook 2007/10/13, you could set the image as a background property on an element as such:
<div style="
width: 520px;
height: 150px;
background-image: url(http://placehold.it/520x520)">
</div>
Here we are using a 520x520 (square) image, and setting the parent element to the desired size (520x150 as per your example).
Now you are faced with the issue of positioning the image background. As per the guide, if you attempt positioning, you will lose Gmail, which is probably a deal breaker. However, as an exercise, you could do this:
<div style="
width: 520px;
height: 150px;
background-image: url(http://placehold.it/520x520);
background-position: 50%;>
</div>
Now you've got an image positioned (centered), at your desired size. on an element.
Option 2: Is also limited to a specific set of clients. You could feasibly use position: relative, on the wrapper, and position: absolute, on the tag. Then use top, left properties to position.
Of course, you lose Yahoo, in addition to Outlook and Gmail.
HTML emails are tricky. I'm sure there are several other options out there. I hope this response gets you pointed in the right direction.
With various mail clients having limited support for html and CSS attributes you're going to have to have trouble achieving a cropped image affect using vanilla CSS and HTML techniques.
The following is supported by most mail clients other than Outlook and Outlook.com
<div style="
width: 520px;
height: 150px;
background-image: url(http://placehold.it/520x200.jpg)
"></div>
Unfortunately most mail clients have no support for clip, overflow:hidden or background-clip.
Even an embedded image has very little support. Send a base64 image in HTML email
The best solution would be to render a copy of the image as you need it without any CSS trickery. This is the only real solution to your problem.
I am working on a CSS tumblr theme header found here grandneue.tumblr.com.
(1) Stretch: I want it to be able to stretch but only up to a maximum size as the header gets too pixelated otherwise), probably around 800px.
(2) Shrink: The second issue I have is, while the header does shrink down to a certain size (it does when I change the desktop browser window and to a certain extent on the iphone5), it doesn't shrink down fully so it fits 100% on a vertical iphone5 browser display.
Can anyone please help me solve these two queries? The content is totally fine so I don't understand why the header won't follow suit!
Looks like the problem is with the image, there's a lot of white space around the logo. Edit the header image to be 800px width and make sure the logo fits right to the edges. Then set the background properties on .header-image.cover to;
.header-image.cover{
-webkit-background-size: 100%;
-moz-background-size: 100%;
background-size: 100%;
margin: 0 -1px;
}
Then finally make the container div .header-image-wrapper ;
.header-image-wrapper{
max-width: 800px;
}
If on mobile the image is right to the edges, just add padding to the container with a media query :)
Hope this helps!
i want to display a div with a background image. I don´t want the div to have any other content than the background image and i don´t want to use a img instead.
It would work with fixed values like height: 100px, but i want to use percentage declaration.
Why is it not showing? Is it even possible with percentage values? Or do i have to declare anything else?
I want to build a RESPONSIVE mobile site, where i can use template buttons and fill it with html text so i don´t need to use several images for the same button with different text. Is there a better way?
Thanks in advance here is my code:
<div id="icon1">
</div>
#icon1 {
background-image: url(images/MyPicture.png);
width: 30% ;
height: 100%;
}
it'd only work if a percentage height is set to all of the parent elements of the DIV#icon1 up to the BODY and HTML tags.
http://fiddle.jshell.net/YJQcF/1/
Otherwise, it'll need fixed height or min-height values to be assigned to it;
Here is a fiddle (jsfiddle.net/salman/RQBra/show/) that demonstrates the problem I am facing. The iframes appear as expected in all browsers (including Safari 5 for Windows). But when I viewed the page on two iOS devices (iPad and iPhone) the content of iframe overflowed and covered the entire area on the right hand side of the iframe. Here is a screenshot of a page that uses similar iframes:
How can I workaround this issue?
You can fix it in a div, but on the iPhone it won't be scrollable without some javascript. I've made a fiddle that shows how you can fix the size of the iframe.
http://jsfiddle.net/RQBra/29/
basically, you wrap your iframe in a wrapper and give it some css:
#wrapper {
position:relative;
z-index:1;
width:400px;
height:400px;
overflow:scroll;
}
A workaround for your specific case is to replace the <iframe> by an <embed> element.
<embed src="..." type="text/html" width="400" height="400"></embed>
It will have the desired effect on Safari Mobile and clip the content to the specified width and height dimensions instead of auto-sizing it. Hoewever, embed is not specifically designed for HTML content and unwanted effects may result when dealing with scrolling, contentWindow and different environments (it is not necessarily rendered natively), so test the case before using it in production.
W3C:
The element represents an integration point for an external
(typically non-HTML) application or interactive content.
Hmm, try to wrap the iframes in divs, but not constraining the iframe's width and height by themselves.
I am guessing inside Iframe there is an HTML file, so in HTML wrap the content in wrapper div
#wrapper {
position: relative;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
it's size will be relative to html body, than the viewportSizes may be as you wish
the second row is handling flickering on Iframe click, happens in ios'...