React native Image：隐藏适合宽度和底部溢出答案

【问题标题】：React native Image: fit width and bottom overflow hiddenReact native Image：隐藏适合宽度和底部溢出
【发布时间】：2022-11-25 20:45:06
【问题描述】：

我想将图像添加到视图中（由下面示例中的黑色方块表示），视图大小取决于屏幕大小。如果第一个视图太小，我还想在图片底部添加一个overflow: hidden

如果我尝试我的形象：

    width: '100%',
    height: undefined,
    aspectRatio: 1,

我的图像居中，而不是固定在顶部。

任何解决方案？

【问题讨论】：

标签： javascript css reactjs react-native

【解决方案1】：

您可以简单地将图像包装在一个 div 中，并在 css 中定义 div 的大小，并为该 div 定义一个 overflow:hidden 属性。

.myBlackBox{
        width: 500px;
        border: 5px solid red;
        overflow: hidden;
        height: 500px;
    }

我的 div css 属性。

【讨论】：

谢谢，但问题不是来自容器，而是来自图像，它没有很好的尊重比 + 锚点到顶部

【解决方案2】：

.cont {
  width: 100px;
  height: 100px;
  border: 1px red solid;
  overflow: hidden;
}

<div class="cont">
  <img width="100%" src="https://upload.wikimedia.org/wikipedia/en/thumb/9/93/Burj_Khalifa.jpg/1200px-Burj_Khalifa.jpg" />
</div>

<hr>

<img width="200px" src="https://upload.wikimedia.org/wikipedia/en/thumb/9/93/Burj_Khalifa.jpg/1200px-Burj_Khalifa.jpg" />

【讨论】：