How can I display a copy of an HTML <div> with 80% of its actual size

Question

I want to display a <div> with all of its inside content as preview, meaning that I have to create the same <div> element again with different width height values, and the image (eg background images) with reduced sizes as well.

Is there an easy way to do this? Or do I have to create new images and new HTML code for this?

Edit

I tried the CSS zoom property which only works for IE and Chrome 8. I need it to work on all common browsers: FF, Opera, Safari, Chrome and IE.

Thanks

Answer 1

This maybe possible only in Internet Explorer with IE-specific "zoom" property.

For other browsers you can easily resize elements, fonts, images, objects, but not background images. For background images you will need set of actually resized images.

Answer 2

Have you tried applying a style that makes everything inside the div 80%? For example:

.preview, .preview * {
  font-size: 80%;
  height: 80%;
  width: 80%;
}

Answer 3

I don't think there's an easy way to do this in CSS. The new background-size property might help with background images, but it's not widely supported yet.

The “easiest” way (where by “easy” I mean “involves you writing the least amount of complicated code”) would be to get the HTML and CSS you want previewed to be rendered by an actual browser's rendering engine, and get that rendering saved out as an image.

Not sure if that'll work in the context you're working in though.

Answer 4

用父div包裹div，然后为父div设置静态宽度和高度，然后设置目标div的宽度和高度％。