我是HTML和CSS的新手。 我试图让鼠标悬停缩放过渡到图像上。我能够毫无问题地进行过渡，但我不希望它溢出随页面大小变化的图像大小。这是CSS和HTML代码。我在 css 代码的".img-outer"部分遇到问题。
img {
width: 30%;
float: left;
margin: 1.66%;
}
/* .img-outer {
overflow: hidden;
max-width: 30%;
max-height: 30%;
} */
.img-inner {
position: relative;
}
img {
transition: 0.5s ease;
}
img:hover {
transform: scale(1.1);
}
p {
font-family: "Bebas Neue";
font-size: 18px;
margin-left: 1.6%;
margin-top: 3%;
color: rgb(77, 75, 75);
}
#name {
font-family: "Bebas Neue";
font-size: 23px;
color: black;
text-align: center;
margin-bottom: 3%;
border-bottom: 2px solid #f1f1f1;
padding-bottom: 2%;
padding-top: 1.5%;
width: 75%;
margin: 0 auto;
}<!DOCTYPE html>
<html lang="en">
<head>
<link
href="https://fonts.googleapis.com/css?family=Bebas+Neue&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="photostyle.css" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Photo Blog</title>
</head>
<body>
<p id="name">BLOG NAME</p>
<p>Mono Photographs</p>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c1.staticflickr.com/9/8450/8026519634_f33f3724ea_b.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c2.staticflickr.com/8/7218/7209301894_c99d3a33c2_h.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c2.staticflickr.com/8/7231/6947093326_df216540ff_b.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c1.staticflickr.com/9/8788/17367410309_78abb9e5b6_b.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c2.staticflickr.com/6/5814/20700286354_762c19bd3b_b.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c2.staticflickr.com/6/5647/21137202535_404bf25729_b.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c2.staticflickr.com/6/5588/14991687545_5c8e1a2e86_b.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c2.staticflickr.com/4/3888/14878097108_5997041006_b.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c2.staticflickr.com/8/7579/15482110477_0b0e9e5421_b.jpg"
/>
</div>
</div>
</body>
</html>检查解决方案。
.img-outer {
overflow: hidden;
width: 30%;
float: left;
margin: 1.66%;
}
.img-inner {
position: relative;
}
img {
transition: 0.5s ease;
width:100%;
}
img:hover {
transform: scale(1.1);
}
p {
font-family: "Bebas Neue";
font-size: 18px;
margin-left: 1.6%;
margin-top: 3%;
color: rgb(77, 75, 75);
}
#name {
font-family: "Bebas Neue";
font-size: 23px;
color: black;
text-align: center;
margin-bottom: 3%;
border-bottom: 2px solid #f1f1f1;
padding-bottom: 2%;
padding-top: 1.5%;
width: 75%;
margin: 0 auto;
}<p id="name">BLOG NAME</p>
<p>Mono Photographs</p>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c1.staticflickr.com/9/8450/8026519634_f33f3724ea_b.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c2.staticflickr.com/8/7218/7209301894_c99d3a33c2_h.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c2.staticflickr.com/8/7231/6947093326_df216540ff_b.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c1.staticflickr.com/9/8788/17367410309_78abb9e5b6_b.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c2.staticflickr.com/6/5814/20700286354_762c19bd3b_b.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c2.staticflickr.com/6/5647/21137202535_404bf25729_b.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c2.staticflickr.com/6/5588/14991687545_5c8e1a2e86_b.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c2.staticflickr.com/4/3888/14878097108_5997041006_b.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c2.staticflickr.com/8/7579/15482110477_0b0e9e5421_b.jpg"
/>
</div>
</div>