시간과 공간 그리고 진실의 방

Example

Specify the size of a background image with "auto" and in pixels:

#example1 {
  background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: auto;
}

#example2 {
  background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: 300px 100px;
}

Try it Yourself »

More "Try it Yourself" examples below.

Definition and Usage

The background-size property specifies the size of the background images.

There are four different syntaxes you can use with this property: the keyword syntax ("auto", "cover" and "contain"), the one-value syntax (sets the width of the image (height becomes "auto"), the two-value syntax (first value: width of the image, second value: height), and the multiple background syntax (separated with comma).

Default value:Inherited:Animatable:Version:JavaScript syntax:

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

Property

CSS Syntax

background-size: auto|length|cover|contain|initial|inherit;

Property Values

ValueDescriptionPlay it

More Examples

Example

Specify the size of a background image with percent:

#example1 {
  background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

#example2 {
  background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: 75% 50%;
}

Try it Yourself »

Example

Specify the size of a background image with "cover":

#example1 {
  background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

Try it Yourself »

Example

Specify the size of a background image with "contain":

#example1 {
  background: url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: contain;
}

Try it Yourself »

Example

Here we have two background images. We specify the size of the first background image with "contain", and the second background-image with "cover":

#example1 {
  background: url(img_tree.gif), url(mountain.jpg);
  background-repeat: no-repeat;
  background-size: contain, cover;
}

Try it Yourself »

Example

Use different background properties to create a "hero" image:

.hero-image {
  background-image: url("photographer.jpg"); /* The image used */
  background-color: #cccccc; /* Used if the image is unavailable */
  height: 500px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

예를 들어 h2를 p로 바꾸고 싶다면 다음과 같이 합니다.

1. h2 요소를 선택하고
2. 내용으로 들어간 후
3. h2 태그를 없애고
4. p 태그로 감싼다.

새로운 태그를 붙이면서 클래스를 넣을 수도 있습니다.

A post revision or two won’t take up a ton of space.

But they do start to add up after a while and take up a considerable amount of space on your database.

Whether you’re in a pursuit to free up some much needed space or prevent the matter altogether, removing old post revisions from your WordPress site is an available option, and in this article I’ll show you how to do just that.

Disabling/Re-enabling Post Revisions

In order to disable post revisions permanently, locate your WordPress site’s wp-config.php file that’s located in the root directory. Add the following line of code at the very top:

define( ‘WP_POST_REVISIONS’, false );

This line of code disables post revisions from being saved to your database in the future. If you’d like to enable this option sometime in the future (for whatever reason), simply replace the line with:

define( ‘WP_POST_REVISIONS’, true );

Limiting Post Revisions

If you’re anything like me, you’ll want to save a couple of post revisions for every post you add to your site – just to be on the safe side. For this, the best option is to set a limit on the number of post revisions that are saved to your database. Add the following line to your wp-config.phpfile:

define( ‘WP_POST_REVISIONS’, 3 );

What this line does is that it saves the 3 most recent post revisions instead of all of them i.e. the older ones are automatically deleted once newer versions are saved. You can replace the number 3 with another integer depending on your preference.

Setting the Auto-Save Interval

Instead of limiting the post revisions to a pre-defined number you can also increase the auto-save interval to save fewer revisions. To do this, open up your site’s wp-config.php file and add the following line at the top:

define( ‘AUTOSAVE_INTERVAL’, 600 );

By default, WordPress auto-saves your post revisions every minute (60 seconds) but by adding this line it’ll save them every ten minutes (600 seconds). This automatically reduces the number of post revisions that are stored to the database.

If you shy away from coding or adding code to your site’s wp-config.php file, you can always get the job done by installing a plugin. Some popular choices are WP-Sweep and WP Revisions Control.

It’s important that you understand that the techniques we covered disable post revisions from being saved for future posts. What about the past revisions?

How to Remove Old Post Revisions

In this section we’ll cover two methods of permanently removing old post revisions from your WordPress site’s database.

Those of you who are familiar (and comfortable) with SQL queries can go with the first method. But if you’d prefer using a plugin then go ahead and skip right down to the second method.

Method 1: Deleting Post Revisions Using Code

Deleting post revisions from your database is one of those things that you should be able to do without having to install a plugin (although there are plugins for it too which we’ll cover next). I mean, you’re trying to save space and installing a plugin goes against that.

In order to delete all of your past post revisions from your site’s database, go to your site’s PHPMyAdmin and execute the following SQL query:

DELETE from wp_posts WHERE post_type = “revision”;

This SQL query removes all posts from your database that have post_type = “revision”. Some webmasters might want to create a backup of their database prior to running this query as an added security measure. In my personal opinion, it’s always best to make backups of your database before you make drastic changes to it.

Method 2: Deleting Post Revisions Using A Plugin

Although deleting post revisions from your WordPress site can be accomplished by running a single SQL query, some webmasters will find it easier to install a plugin and let it do all the work. This might be because the plugin has added benefits (database maintenance, removes excess files etc.) or simply because they’re not comfortable with programming.

Revision Control

Revision Control enables users to gain finer control over their WordPress site’s post revision system. With its simple one-click functionality, users can choose to disable or enable post revisions without have to get into the nitty gritty code.

The plugin also enables users to set limits on the number of post revisions that are saved to the database. Revision Control’s fine-tuned system lets webmaster disable, enable and set restrictions for either posts or pages depending upon their preference.

Better Delete Revision

The Better Delete Revision plugin removes redundant post revisions from your WordPress site’s database in addition to the meta-data that is associated with them including tags and relationships. The plugin is careful not to mess with your site’s published content or posts that have been scheduled to be posted.

Most webmasters, even those that are familiar with WordPress programming, often choose to remove post revisions using this plugin because it also performs some light database optimization.

Both of these plugins are available for free.

Wrapping It Up

Post revisions don’t slow your site down or pose as an issue for user experience. They do, however, start to take up a lot of space on your site’s database after a while.

If you’ve been publishing posts on your WordPress site for a few years now then removing the old post revisions will clear up a significant amount of space for you on your database.

On the other hand, if you’re just starting out as a WordPress blogger, then you can leverage the first part of this tutorial and disable old post revisions.

We hope you our tutorial helped you learn how to Disable and Remove Old Post Revisions in WordPress. You may also want to see our post on 5 things you need to do to keep your WordPress site running Smoothly.

Which method are you most comfortable with for disabling/removing old post revisions? Is there another method you use? Let us know in the comments section below!

I wanted to embed a YouTube <iframe> in a webpage. I wanted it to be full-width (that is, width: 100%), but keep the normal YouTube aspect ratio. I wanted it to behave like an <img>, where the image file contains its fixed aspect ratio, which the browser uses to lay out the image appropriately.

Unlike <img>s, <iframe>s don’t have a fixed aspect ratio, because <iframe>s embed web pages, which don’t have fixed/known aspect ratios. But for the particular case of YouTube videos, there is a fixed aspect ratio we want: the standard <iframe> has width="560" height="315", which simplifies to a 16:9 aspect ratio. Can we tell the browser to display an <iframe> at width: 100%; aspect-ratio: 16:9;?

There is no aspect-ratio property, but we can do this with CSS. The 16:9 aspect ratio corresponds to a height which is 56.25% of the width. To make a CSS box which is 56.25% of its own width, we can use the padding-top property with a percentage, which is proportional to its own width.

Like this:

<div style="padding-top: 56.25%;background-color: yellow;"></div>

Next, we put the <iframe> inside this box, making it fill the whole box. To size the <iframe>, we ignore the width="560" height="315" element properties, and instead use the CSS properties width:100%;height:100%;.

<div style="padding-top:56.25%;background-color: yellow;"> <iframe src="https://www.youtube.com/embed/nckseQJ1Nlg" frameborder="0" allowfullscreen style="width:100%;height:100%;"></iframe>

</div>

Oh no, that’s not right at all! The <iframe> is not the right height, and it’s not positioned correctly. We can fix these with the position attribute:

<div style="position:relative;padding-top:56.25%;"> <iframe src="https://www.youtube.com/embed/nckseQJ1Nlg" frameborder="0" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe> </div>

That’s it: a full-width <iframe> with fixed aspect ratio. Enjoy.

Get updates on Twitter

하지만 여기서 가장 중요한 것은 position을 absolute 속성으로 지정하는 경우, 다른 element 의 위치를 침범해버린다. 따라서 다음과 같이 수정한다.

<iframe src="https://www.youtube.com/embed/nckseQJ1Nlg" frameborder="0" allowfullscreen style="top : 0px; left:0px; width : 100%; height : 100%;"></iframe>