发表新帖
发表新帖

Changing image sizes proportionally using CSS?

后端 未结
关注
9 2135
面向向阳花
面向向阳花 2020-12-12 10:19

I have been trying for a couple of days now to configure my thumbnail gallery so all the images appear the same height and width. However when I change the Css code to,

相关标签:
9条回答
  • 星月不相逢
    2020-12-12 10:20

    You need to fix one side ( eg height ) and set the other to auto.

    Eg 

     height: 120px;
 width: auto;

    That would scale the image based on one side only. If you find cropping the image acceptable, you can just set

    overflow: hidden;

    to the parent element, which would crop out anything that would otherwise exceed its size.

    0 讨论(0)
  • 庸人自扰
    2020-12-12 10:21

    If you don't want to stretch the image, fit it into div container without overflow and center it by adjusting it's margin if needed.

    1. The image will not get cropped
    2. The aspect ratio will also remain the same.

    HTML:

    <div id="app">
    <div id="container">
      <img src="#" alt="something">
    </div>
    <div id="container">
      <img src="#" alt="something">
    </div>
    <div id="container">
      <img src="#" alt="something">
    </div>
</div>

    CSS:

    div#container {
    height: 200px;
    width: 200px;
    border: 1px solid black;
    margin: 4px;
}
img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0 auto;
}
    0 讨论(0)
  • 爱一瞬间的悲伤
    2020-12-12 10:28

    To make images adjustable/flexible you could use this:

    /* fit images to container */
.container img {
    max-width: 100%;
    height: auto;
}
    0 讨论(0)
  • 孤独总比滥情好
    2020-12-12 10:28

    Put it as a background on your holder e.g.

    <div style="background:url(path/to/image/myimage.jpg) center center; width:120px; height:120px;">
&nbsp;
</div>

    This will center your image inside a 120x120 div chopping off any excess of the image

    0 讨论(0)
  • 滥情空心
    2020-12-12 10:30

    You can use object-fit css3 property, something like 

    <!doctype html>
<html>

<head>
  <meta charset='utf-8'>
  <style>
    .holder {
      display: inline;
    }
    .holder img {
      max-height: 200px;
      max-width: 200px;
      object-fit: cover;
    }
  </style>
</head>

<body>
  <div class='holder'>
    <img src='meld.png'>
  </div>
  <div class='holder'>
    <img src='twiddla.png'>
  </div>
  <div class='holder'>
    <img src='meld.png'>
  </div>
</body>

</html>

    It is not exactly your answer, though, because of it doesn't stretch the container, but it behaves like the gallery and you can keep styling the img itself.

    Another drawback of this solution is still a poor support of the css3 property. More details are available here: http://www.steveworkman.com/html5-2/javascript/2012/css3-object-fit-polyfill/. jQuery solution can be found there as well.

    0 讨论(0)
  • 长情又很酷
    2020-12-12 10:33

    this is a known problem with CSS resizing, unless all images have the same proportion, you have no way to do this via CSS.

    The best approach would be to have a container, and resize one of the dimensions (always the same) of the images. In my example I resized the width.

    If the container has a specified dimension (in my example the width), when telling the image to have the width at 100%, it will make it the full width of the container. The auto at the height will make the image have the height proportional to the new width.

    Ex:

    HTML:

    <div class="container">
<img src="something.png" />
</div>

<div class="container">
<img src="something2.png" />
</div>

    CSS:

    .container {
    width: 200px;
    height: 120px;
}

/* resize images */
.container img {
    width: 100%;
    height: auto;
}
    0 讨论(0)
 看不清?
提交回复
热议问题