22

この問題は、最新バージョンのSafari forWindows7でテストしています。

問題は、このコードが他のすべてのブラウザで機能することですが、サファリ：

 <style type="text/css">
    .userImg { height: 100%; width: 100%; }
    .imgContainer { height: auto; width: 150px; }
 </style>

 <div class="imgContainer">
    <img id="img" class="userImg" src="TemplateFiles/Hydrangeas.jpg" alt="" />
 </div>

CSSだけを使用してSafariで画像を比例的にサイズ変更するためのトリックを知っている人はいますか？

ありがとう！

4

5 に答える 5

119

高さ自動を使用する必要があり、画像の親が表示に設定されている場合：flex、このトリックが役立ちます。

image { align-self: flex-start; }

画像の親がflex-direction：columnを設定している場合は、代わりにこれを行う必要があります。

image { justify-self: flex-start; }
于 2020-04-13T21:15:26.547 に答える
14

画像の幅だけを設定するだけです。ブラウザは画像を比例して自動的に拡大縮小します。

.userImg { width: 100%; }
.imgContainer { height: auto; width: 150px; }​
于 2012-05-25T19:24:56.773 に答える
4 
.userImg { width: 100%; height: auto; }
.imgContainer { width: 150px; }​

2019年。親要素を確認してください

.imgContainer { display: flex; align-items: stretch}
于 2019-12-20T06:58:49.627 に答える
4

高さ自動を使用する必要がある人のために、あなたもこれを試してみてください：

.userImg{
    object-fit: contain;
}
于 2020-07-07T09:45:46.520 に答える
2

これを試してください：親にはdisplay：flexがあります子にはalign-self：centerがあります

@import url('https://fonts.googleapis.com/css?family=Slabo+27px');
body {
  font-family: "Slabo 27px", serif;
}
h2 {
  text-align: center;
}
[data-flex] {
  display: flex;
  width: 80%;
  max-width: 800px;
  font-size: 1.2rem;
  margin: 0 auto;
  line-height: 1.5;
}
[data-flex] > img {
  margin-right: 2rem;
  width: 30%;
}
[data-center] {
  align-items: center;
}
[data-flex] div, [data-flex] p {
  flex: 1;
}
[data-flex] div {
  margin-right: 2rem;
}
[data-flex] div img {
  width: 100%;
}
<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<h2>By default, images that are flex-children will be their <em>natural</em> height, regardless of their width:</h2>
<div data-flex>
  <img src="sophie.jpg" alt>
</div>
<h2>This can be avoided by <em>not</em> specifying a width for the image, but that makes it non-responsive:</h2>
<div data-flex>
  <img src="sophie.jpg" alt style="width: auto">
</div>
<h2>Solution 1: apply <code>align-self: center</code> to the image</h2>
<div data-flex>
  <img src="sophie.jpg" alt style="align-self: center">
</div>

<h2>Solution 2: apply <code>align-items: center</code> to the flex container</h2>
<div data-flex data-center>
  <img src="sophie.jpg" alt>
</div>

<h2>Solution 3: Place the image inside another container, and make <em>that</em> the flex-child</h2>

<div data-flex data-center>
  <div>
  <img src="sophie.jpg" alt>
  </div>
</div>

于 2020-12-31T19:59:33.303 に答える