Question

我使用transform根据其EXIF数据旋转图像。然后，我想显示它＆＃34;全屏＆＃34;通过将其拟合到其父div。

问题是，max-width / max-height和所有其他大小调整指令＆＃34;忽略＆＃34;旋转（这是正常的，根据transform规范，元素的转换在流程中被忽略＆＃34;

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

＆＃13;

div.top {
    position: fixed;
    width: 100%;
    height: 100%;
    border: 1px solid blue;
}
img {
    transform: rotate(90deg);
    max-width: 100%;
    max-height: 100%;
}

＆＃13;

<div class="top">
    <img src="http://www.androidpolice.com/wp-content/uploads/2014/02/nexusae0_wm_DSC02232.jpg">
</div>

＆＃13;

有没有办法实现这个目标？

Answer 1

对于全屏显示，最简单的解决方案是使用视口单位指定图像的宽度和高度：

普通图像的宽度应为100vw，高度应为100vh
旋转图像的宽度应为100vh，高度应为100vw

可以使用CSS转换将图像移到中间。这是一个示例，它使用了两个大于和小于视口的图像：

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>

Answer 2

使元素的高度等于其宽度，反之亦然，这是Java脚本，因为它可以检索这些值并将其重新设置。

在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>

然后，这只是一个主意。

Answer 3

我可能会喜欢这样的东西（使用视口大小调整来交换最大宽度/高度）

* {
  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>

Answer 4

这里的尝试很少，需要手动同步宽度/高度。对于那些愿意使用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>

定位变得很尴尬。但是，我希望有人会从这里分支出来，想到更好的解决方案。

Answer 5

如果您可以忽略变换部分，因为它是一个长宽比问题，并且没有答案，但是可以将图像显示到父元素的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;
}

Answer 6

您可以在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);

Answer 7

我终于找到了解决此问题所需方法的答案，也许它将对其他人有所帮助。我有一个灵活的父母，而我的孩子需要根据EXIF进行轮换。我需要图像定向：from-image;

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

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

Answer 8

我正在使用图像的自然宽度和高度来计算变换比例，如我在以下文献中所述：

https://stackoverflow.com/a/61620946/7037600

Answer 9

对于exif部分，您无法使用css来完成，因为css无法准备exif数据。

但是对于CSS部分，您需要使用transform-origin，而不仅是transform，还需要使用宽度100％和heigh auto来保持比例。

这是一个例子： http://jsfiddle.net/yxqgt2d1/1/

将图像旋转并缩放到＆＃34;适合＆＃34;容器div

9 个答案: