Question

我正在尝试缩放两个图像以适应移动屏幕，同时保持其原始比例而不会溢出。当我尝试应用max-width时，只有当一个图像低于屏幕宽度时才会启动。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<org.tensorflow.demo.AutoFitTextureView
    android:id="@+id/texture"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true" />

<org.tensorflow.demo.RecognitionScoreView
    android:id="@+id/results"
    android:layout_width="match_parent"
    android:layout_height="112dp"
    android:layout_alignParentTop="true" />

<org.tensorflow.demo.OverlayView
    android:id="@+id/debug_overlay"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentStart="true"
    android:layout_alignParentTop="true" />

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentEnd="true"
    android:layout_marginBottom="25dp"
    android:layout_marginEnd="135dp"
    android:text="Button"
    android:onClick="getMe"/>

</RelativeLayout>

.one img {
  position: absolute;
  width: 200px;
  height: 200px;
}

.two img {
  position: absolute;
  margin-left: 200px;
  width: 300px;
  height: 200px;
}

Answer 1

<强>尝试：

* {
  margin: 0;
  padding: 0;
}

.slider {
  display: flex;
}

.slider .slide img {
  width: 100%;
}

<div class="slider">
  <div class="slide">
    <img src="https://upload.wikimedia.org/wikipedia/commons/5/57/Distribution_H._leucocephalus.png" style="max-width: 200px;">
  </div>
  <div class="slide">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Back_to_the_Six_Mile_Lake_eagles_%28Haliaeetus_leucocephalus%29.%22feed_me_mom%22._%2819159890706%29.jpg/800px-Back_to_the_Six_Mile_Lake_eagles_%28Haliaeetus_leucocephalus%29.%22feed_me_mom%22._%2819159890706%29.jpg"
      style="max-width: 300px;">
  </div>
</div>

Answer 2

检查一下：

＆＃13;

.container {
  display: flex;
}

.one img {
  width: 100%;
  max-width: 200px;
}

.two img {
  width: 100%;
  max-width: 300px;
}

＆＃13;

<div class="container">
  <div class="one"><img src="https://upload.wikimedia.org/wikipedia/commons/5/57/Distribution_H._leucocephalus.png"></div>
  <div class="two"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Back_to_the_Six_Mile_Lake_eagles_%28Haliaeetus_leucocephalus%29.%22feed_me_mom%22._%2819159890706%29.jpg/800px-Back_to_the_Six_Mile_Lake_eagles_%28Haliaeetus_leucocephalus%29.%22feed_me_mom%22._%2819159890706%29.jpg"></div>
</div>

＆＃13;

Answer 3

.one, .two {
  width:50%; float:left
}
.one img, .two img { 
  width: 100%; 
}

<div class="one"><img src="https://upload.wikimedia.org/wikipedia/commons/5/57/Distribution_H._leucocephalus.png"></div>
<div class="two"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Back_to_the_Six_Mile_Lake_eagles_%28Haliaeetus_leucocephalus%29.%22feed_me_mom%22._%2819159890706%29.jpg/800px-Back_to_the_Six_Mile_Lake_eagles_%28Haliaeetus_leucocephalus%29.%22feed_me_mom%22._%2819159890706%29.jpg"></div>

如果您正在寻找，请与我联系并告知我们。

缩放两个不同的imgsto适合屏幕

3 个答案: