CSS: 100% width or height while keeping aspect rat

问题:

Currently, with STYLE, I can use width: 100% and auto on the height (or vice versa), but I still can't constrain the image into a specific position, either being too wide or too tall, respectively.

Any ideas?

回答1:

If you only define one dimension on an image the image aspect ratio will always be preserved.

Is the issue that the image is bigger/taller than you prefer?

You could put it inside a DIV that is set to the maximum height/width that you want for the image, and then set overflow:hidden. That would crop anything beyond what you want.

If an image is 100% wide and height:auto and you think it's too tall, that is specifically because the aspect ratio is preserved. You'll need to crop, or to change the aspect ratio.

Please provide some more information about what you're specifically trying to accomplish and I'll try to help more!

--- EDIT BASED ON FEEDBACK ---

Are you familiar with the max-width and max-height properties? You could always set those instead. If you don't set any minimum and you set a max height and width then your image will not be distorted (aspect ratio will be preserved) and it will not be any larger than whichever dimension is longest and hits its max.

回答2:

Some years later, looking for the same requirement, I found a CSS option using background-size.

It is supposed to work in modern browsers (IE9+).

<div id="container" style="background-image:url(myimage.png)">
</div>

And the style:

#container
{
  width:  100px; /*or 70%, or what you want*/
  height: 200px; /*or 70%, or what you want*/
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

The reference: http://www.w3schools.com/cssref/css3_pr_background-size.asp

And the demo: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size

回答3:

By setting the CSS max-width property to 100%, an image will fill the width of it's parenting element, but won’t render larger than it's actual size, thus preserving resolution.

Setting the height property to auto maintains the aspect ratio of the image, using this technique allows static height to be overridden and enables the image to flex proportionally in all directions.

img {
    max-width: 100%;
    height: auto;      
}

回答4:

Had the same issue. The problem for me was that the height property was also already defined elsewhere, fixed it like this:

.img{
    max-width: 100%;
    max-height: 100%;
    height: inherit !important;
}

回答5:

Simple elegant working solution:

img {
  width: 600px;  /*width of parent container*/
  height: 350px; /*height of parent container*/
  object-fit: contain;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

回答6:

Simple solution:

min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
margin: 0;
padding: 0;

By the way, if you want to center it in a parent div container, you can add those css properties:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

It should really work as expected :)

回答7:

One of the answers includes the background-size: contain css statement which I like a lot because it is straightforward statement of what you want to do and the browser just does it.

Unfortunately sooner or later you are going to need to apply a shadow which unfortunately will not play well with background image solutions.

So let's say that you have a container which is responsive but it has well defined boundaries for min and max width and height.

.photo {
  max-width: 150px;
  min-width: 75px;
  max-height: 150px;
  min-height: 75px;
}

And the container has an img which must be aware of the pixels of the height of the container in order to avoid getting a very high image which overflows or is cropped.

The img should also define a max-width of 100% in order first to allow smaller widths to be rendered and secondly to be percentage based which makes it parametric.

.photo > img {
  max-width: 100%;
  max-height: 150px;
  -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,1);
  -moz-box-shadow:    0 0 13px 3px rgba(0,0,0,1);
  box-shadow:         0 0 13px 3px rgba(0,0,0,1);
}

Note that it has a nice shadow ;)

Enjoy a live example at this fiddle: http://jsfiddle.net/pligor/gx8qthqL/2/

回答8:

Its best to use auto on the dimension that should respect the aspect ratio. If you do not set the other property to auto, most browsers nowadays will assume that you want to respect the aspect ration, but not all of them (IE10 on windows phone 8 does not, for example)

width: 100%;
height: auto;

回答9:

I use this for a rectangular container with height and width fixed, but with images of different sizes.

img {
  max-width: 95%;
  max-height: 15em;
  width: auto !important;
}

回答10:

This is a very straightforward solution that I came up with after following conca's link and looking at background size. It blows the image up and then fits it centered into the outer container w/o scaling it.

<style>
#cropcontainer
{
  width:  100%; 
  height: 100%; 
  background-size: 140%;
  background-position: center;
  background-repeat: no-repeat;
}
</style>

<div id="cropcontainer" style="background-image: url(yoururl); />

回答11:

Not to jump into an old issue, but...

#container img {
      max-width:100%;
      height:auto !important;
}

Even though this is not proper as you use the !important override on the height, if you're using a CMS like WordPress that sets the height and width for you, this works well.

回答12:

Use JQuery or so, as CSS is a general misconception (the countless questions and discussions here about simple design goals show that).

It is not possible with CSS to do what you seem to wish: image shall have width of 100%, but if this width results in a height that is too large, a max-height shall apply - and of course the correct proportions shall be preserved.

回答13:

I think this is what your looking for, i was looking for it my self, but then i remembered it again befor i found the code.

background-repeat: repeat-x;
background-position: top;
background-size:auto;
background-attachment: fixed;

digital evolution is on its way.

回答14:

try this

background-size: 100% 100%;
  background-image: url("PATH_TO_IMAGE");
  background-repeat: no-repeat;