web-dev-qa-db-ja.com

コンテナdivに「合う」ように画像を回転および拡大縮小します

transformを使用して、EXIFデータに従って画像を回転しています。次に、親divに合わせて「フルスクリーン」で表示したいと思います。

問題は、 max-width/max-heightおよび他のすべてのサイズ設定ディレクティブは回転を「無視」します（これは通常、transform仕様によれば、要素の変換はフローで「無視」されます。

Jsfiddle： http://jsfiddle.net/puddjm4y/2/

div.top {
    position: fixed;
    width: 100%;
    height: 100%;
    border: 1px solid blue;
}
img {
    transform: rotate(90deg);
    max-width: 100%;
    max-height: 100%;
}
<div class="top">
    <img src="http://www.androidpolice.com/wp-content/uploads/2014/02/nexusae0_wm_DSC02232.jpg">
</div>

これを達成する方法はありますか？

htmlcsscss-transforms
22
Blacksad

全画面表示の場合、最も簡単な解決策は、ビューポート単位を使用して画像の幅と高さを指定することです。

  • 通常の画像は幅100vw、高さ100vhである必要があります
  • 回転した画像は、幅100vh、高さ100vwである必要があります

CSS変換を使用して、画像を中央に移動できます。次に例を示します。ビューポートよりも大きい画像と小さい画像の2つを使用しています。

body {
  margin: 0;
}
img {
  display: block;
}
img.normal {
  max-width: 100vw;
  max-height: 100vh;
  transform: translatex(calc(50vw - 50%)) translatey(calc(50vh - 50%));
}
img.rotated {
  max-width: 100vh;
  max-height: 100vw;
  transform: translatex(calc(50vw - 50%)) translatey(calc(50vh - 50%)) rotate(90deg);
}
/* demo */
.demo {
  height: 100vh;
  position: relative;
}
.demo:nth-child(odd) {
  background-color: #CCC;
}
.demo:nth-child(even) {
  background-color: #EEE;
}
.demo::after {
  content: attr(title);
  position: absolute;
  left: 0;
  top: 0;
  padding: .25em .5em;
  background-color: rgba(255, 255, 255, .8);
}
<div class="demo" title="Large image, normal"><img class="normal" src="https://i.stack.imgur.com/2DdPE.jpg"></div>
<div class="demo" title="Large image, rotated"><img class="rotated" src="https://i.stack.imgur.com/2DdPE.jpg"></div>
<div class="demo" title="Small image, normal"><img class="normal" src="https://i.stack.imgur.com/ustNQ.jpg"></div>
<div class="demo" title="Small image, rotated"><img class="rotated" src="https://i.stack.imgur.com/ustNQ.jpg"></div>
8
Salman A

要素の高さを幅と同じにし、その逆も同様です。これらの値を取得して元に戻すことができるため、Javascriptの機能です。

CSSでは、それを実現する方法はありません。また、動的ディメンションでは不可能であるため、100%は、それらへの参照がないため、使用できなかったとしても、まったく同じになります。

ただし、メディアクエリで操作できる固定値を使用する場合は、変数を使用しないでください。このようにして、値とその参照を取得します。

:root {
  --width: 100px;
  --height: 140px;
}

div.top {
  position: fixed;
  width: var(--width);
  height: var(--height);
  border: 1px solid blue;
}

img {
  width: var(--width);
  height: var(--height);
  animation: rotate 3s alternate infinite;
}


/* translate values are the difference between the height */
/* and width divided between the X and Y */
/* 100 - 140 = 40 / 2 = 20px each */

@keyframes rotate {
  to {
    transform: rotate(90deg) translate(20px, 20px);
    width: var(--height);
    height: var(--width);
  }
}
<div class="top">
  <img src="http://www.androidpolice.com/wp-content/uploads/2014/02/nexusae0_wm_DSC02232.jpg">
</div>

繰り返しになりますが、これは単なるアイデアです。

2
Zohir Salak

私はおそらくこのようなものを選ぶでしょう（ビューポートのサイズ設定を使用して最大幅/高さを交換しました）

* {
  box-sizing:border-box;
}

html, body {
  margin:0;
}

div.top {
    position: fixed;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    border: 1px solid blue;
    display:flex;
}
img {
    transform: rotate(90deg);
    max-width: 100vh;
    max-height: 100vw;
    margin:auto;
}
<div class="top">
    <img src="http://www.androidpolice.com/wp-content/uploads/2014/02/nexusae0_wm_DSC02232.jpg">
</div>
1
Maciej Kwas

私はついにこの問題に必要なものに対する答えを見つけました、多分それは他の誰かを助けるでしょう。私にはフレックスの親と、EXIFに基づいてローテーションする必要のある子があります。画像の向きが必要でした：from-image;

imgBox {
    flex: 1;
    padding: 1rem;
    overflow: hidden;
 }

 .img1 {
     object-fit: cover;
     max-width: 100%;
     image-orientation: from-image;
 }
0
Travis Unangst

JavaScriptでこれを行うには、コンテナーの高さを確認し、画像のmaxWidthをコンテナーの高さに設定します。

 /**
 * Set max width of a rotated image to container height
 * @param {*} container
 * @param {*} image
 */
function setRotatedImageWidth(container = null, image = null) {
    if (!container || !image) {
        return false; // exit if empty
    }
    var h = container.offsetHeight; // Container height
    var w = image.offsetWidth; // Image width

    // If image width is greater container height
    if (w > h) {
        image.style.maxWidth = h + 'px';
    }
}

var container = document.querySelector('.container');
var image = container.querySelector('img');
setRotatedImageWidth(container, image);
0
Darren Cooney

これは、幅/高さを手動で同期する必要があるわずかな試みです。 JSを使用する意思がある人にとっては、同期はかなり簡単なはずです。

ここにあります：

div.top {
    border: 1px solid blue;
    box-sizing: border-box;
    width: 100%;
    height: 300px;/* SYNC */
    position: relative;
    overflow: hidden;
}

div.top:before {
  content: "";
  position: absolute;
  width: 300px;/* SYNC */
  height: 100%; 
  transform: rotate(90deg);
  background-image: url(http://www.androidpolice.com/wp-content/uploads/2014/02/nexusae0_wm_DSC02232.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}
<div class="top"></div>

ポジショニングがぎこちなくなります。しかし、私の希望は、誰かがここから分岐して、より良い解決策を思いつくことです。

0
Rafael

アスペクト比の問題であり、答えがないため、変換部分を無視できますが、親要素の100％に画像を表示することは可能であり、メディアクエリは必要ありません。 100％は親を基準にしており、画像の場合、寸法を決定するのはアスペクト比です。私たちはそれを伸ばすことができますが、それは目的を果たしません。 cssの下で何らかの形であなたを助けるかもしれないことを願っています。

div.top {
    position: fixed;
    width: 100%;
    height: 100%;
    border: 1px solid blue;
    background-image:url("http://www.androidpolice.com/wp-content/uploads/2014/02/nexusae0_wm_DSC02232.jpg");
    background-size:cover;
    background-repeat:no-repeat;
    background-position:50%;
}
div.top img {
    /* transform: rotate(90deg); */
    min-width: 100%;
    min-height: 100%;
    visibility:hidden;
}
0
vssadineni