Question

我尝试使用带有max-width属性的p标签，但是并没有为我工作：

.a {
     max-width:100px;
}

使用HTML：

<p class="a">Hello Welcome to Stackoverflow.</p>

我希望此文字适合500 * 500分辨率的图像。如果文本超出图像宽度，则应自动换行到下一行。

Answer 1

使用此代码

＆＃13;

div {
  height: auto;
  width: 500px;
}

img {
  height: 100%;
  width: 100%;
}

＆＃13;

<html>

<head>

</head>

<body>

  <div>
  <img src="img.jpg" />
  <p>Hello Welcome to Stackoverflow</p>
  </div>
</body>



</html>

＆＃13;

Answer 2

你可以试试这个。它对我来说很好。

.resized_anchor {
 	max-width: 100px;
 }

<!DOCTYPE html>
<html>
<head>
<title>question reality.</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
	<div>
		<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSpMXZY5KMRLpo8vbVxizv5SiRdX2AXeM1lkT-7dXTL2D5el7UHZ59GHWc" height="100px" width="100px" />
		<div class="resized_anchor">
			<a href="#">Hello Welcome to Stackoverflow. Doing a greate job here</a>		
		</div>
	</div>
</body>
</html>

Answer 3

我不知道这是你需要的，只需查看这个片段

＆＃13;

.image_wrap {
  width: 300px;
}
.image_wrap img {
  width: 100%;
}

＆＃13;

<div class="image_wrap">
	<img src="http://dreamicus.com/data/garden/garden-06.jpg" alt="garden" />
	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has</p>
</div>

＆＃13;

在图库中的每个图像下添加文本

3 个答案: