Question

我有一个自适应ul列表，其中每个li都是ul宽度的50％。在每个li中，我都有一张图片。我希望有一个固定的高度和100％的宽度，保持图像的比例（例如通过缩放）。我该怎么办呢？

＆＃13;

ul {
  width: 100%
}
li {
  width: 50%;
  float: left;
}
li img {
  height: 262px;
  width: 100%;
}

＆＃13;

<ul>
  <li>
    <img src="aa.jpg">
  </li>
  <li>
    <img src="bb.jpg">
  </li>
</ul>

＆＃13;

Answer 1

如评论中所述，您可以使用

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight=".35"
        android:background="@color/LightGreen"
        >

        <Space
            android:layout_width="match_parent"
            android:layout_weight=".2"
            android:layout_height="0dp"/>

        <ImageView
            android:id="@+id/imgViewLogo"
            android:src="@drawable/logo"
            android:layout_margin="10dp"
            android:layout_width="90dp"
            android:layout_height="0dp"
            android:gravity="center"
            android:layout_gravity="center_horizontal"
            android:adjustViewBounds="true"
            android:scaleType="fitCenter"
            android:layout_weight=".55"
             />

        <Space
            android:layout_width="match_parent"
            android:layout_height="10dp"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Temporary Title for Logo"
            android:id="@+id/tvAILLogo"
            android:layout_margin="2dp"
            android:textSize="@dimen/font_size22"
            android:textStyle="bold"
            android:gravity="center"
            android:layout_gravity="center_horizontal"
            android:layout_weight=".25"
            />

    </LinearLayout>

    <Space
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight=".1"
        />

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight=".4"
         >

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".5"
            android:background="@color/LightCoral"
            >

            <ImageButton
                android:id="@+id/imgBtn1"
                android:src="@drawable/imgbtn1"
                android:layout_width="90dp"
                android:layout_height="95dp"
                android:background="@null"
                android:layout_gravity="right"
                android:adjustViewBounds="true"
                android:scaleType="fitCenter"
                />

            <Space
                android:layout_width="match_parent"
                android:layout_height="15dp"
                />

            <ImageButton
                android:id="@+id/imgBtn2"
                android:src="@drawable/imgbtn2"
                android:layout_width="90dp"
                android:layout_height="95dp"
                android:background="@null"
                android:layout_gravity="right"
                android:adjustViewBounds="true"
                android:scaleType="fitCenter"
                />

        </LinearLayout>

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".5"
            android:background="@color/LightYellow"
            >

            <TextView
                android:id="@+id/tvGradeAssessment"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:text="Title1"
                android:textColor="@color/white"
                android:textSize="@dimen/font_size24"
                android:paddingLeft="10dp"
                android:layout_gravity="left"
                android:background="@color/red"
                />

            <Space
                android:layout_width="match_parent"
                android:layout_height="15dp"
                />

            <TextView
                android:id="@+id/tvPrivateData"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:text="Title2"
                android:textColor="@color/white"
                android:textSize="@dimen/font_size24"
                android:paddingLeft="10dp"
                android:background="@color/green"
                android:layout_gravity="left"
                />

        </LinearLayout>

    </LinearLayout>

    <!-- filler -->
    <Space
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight=".05"
        />

    <TextView
        android:id="@+id/tvVersionNumber"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:text="[Version number]"
        android:layout_gravity="bottom"
        android:paddingLeft="15dp"
        android:layout_weight=".1"
        android:textSize="20sp"
        android:background="@color/LightGrey"
        />


</LinearLayout>

或者您可以将图像设置为背景

li {
overflow: hidden;
height: 262px; 
}
li img {
width: 100%;
}

Answer 2

您需要省略说明图像的宽度。这样，所提供图像的高度将调整为所需的262px高度，其相应的宽度将自动调整为原始对应的宽高比。

ul {
  width: 100%
}
li {
  width: 50%;
  float: left;
}
li img {
  height: 262px;
}

具有固定高度，宽度自动和保持比率的图像

2 个答案: