Question

我有两张图片，下面有相关的段落，完全在电脑上显示：ViewSiteHere - 然而移动设备上的同一页面会将图片移到彼此之下，从而显示不正确的信息。

我尝试过让每张图片的宽度只有49％，但这只会让图片更小而且不会彼此相邻

MobileTest

谢谢

Answer 1

根据文件的流程，目前的内容顺序为：

图片1
图片2
图像描述1
图像描述2

你需要做的是放置＆＃34; Image-1＆＃34;和＆＃34;图像-1＆＃34;在create元素中。这将保持移动设备上文本和图像之间的关系

Answer 2

图像的最佳方法，无论是为了响应的可访问性，还是将一个放在另一个之下。但是，如果您希望这样做，可以使用max-width/max-height和float并悬停图片放大。你可以使用类似的东西：

body, html {
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 800px) {
  img {
    max-width: 50%;
    max-height: 50%;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
  }
  
  img:first-child {
    float: left;
  }
  
  img:hover {
    max-width: 100%;
    max-height: 100%;
  }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>TEST IMG</title>
</head>
<body>
<div class="wrap">
  <img src="http://www.pepafrica.org/img/1.jpg" alt="">
  <img src="http://www.pepafrica.org/img/1.jpg" alt="">
</div>
</body>
</html>

http://output.jsbin.com/fodehu

列在移动设备上显示不正确

2 个答案: