CSS帮助-删除图像之间的空白（<img/>）

Question

现在，我正在尝试使图像垂直和水平地并排堆叠，以使它们之间没有空白。这是我目前的视图。

理想情况下，没有空白，空白。我已经在下面的GifViewer组件中插入了ReactJS代码，其中包含。关于如何使它起作用的任何想法？而且由于axios的请求，该代码将无法运行，因此目前仅用于视觉效果。

img {
	display: inline !important;
	width: 20%;
	vertical-align: top;
	height: auto;
	top: 0;
	left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

class GifViewer extends Component {
	render() {
		return (
			<img
				key={this.props.keyyer}
				src={`https://i.giphy.com/${this.props.id}.gif`}
			/>
		);
	}
}

class App extends Component {
	constructor(props) {
		super(props);
		this.state = {
			searchTerm: "",
			counter: 0,
			pastSearches: [],
			data: null
		};
		this.handleChange = this.handleChange.bind(this);
	}

	componentDidUpdate() {
		console.log("this.state.data", this.state.data);
	}

	componentDidMount() {
		console.log("Mounted");
	}

	handleChange(event) {
		this.setState({ searchTerm: event.target.value });
		axios
			.get(
				`${BASE_URL}${config.apiKey}${QUERY}${this.state.searchTerm}${LIMITS}`
			)
			.then(result => {
				this.setState({ data: result.data.data });
			});
	}

	render() {
		if (this.state.data) {
			var GIFS = this.state.data.map(d => (
				<GifViewer keyyer={d.embed_url} id={d.id} />
			));
		}

		return (
			<div className="container-fluid">
				<div className="row py-5 bg-success">
					<div className="col-8 offset-2">
						<h3 className="text-center">LET'S BREAK THE INTER-WEBZ</h3>
						<input
							type="text"
							className="form-control"
							value={this.state.searchTerm}
							onChange={this.handleChange}
							placeholder="Search"
						/>
					</div>
				</div>
				{this.state.data ? GIFS : "Nothing yet"}
			</div>
		);
	}
}

export default App;

Answer 1

我个人最喜欢的解决方法是css属性object-fit: cover;（应用于您的img规则）。

关于属性here，有一篇很棒的文章，但要点（出于您的目的）是您可以缩放图像以覆盖整个空间，而不会拉伸或扭曲图像。