角丸にしたDiv内の画像の角がはみ出してしまう
よろしくお願いします。
参考書片手にCSSを勉強しています。
品物の画像をスマホで見られるページを作っているのですが、
角丸にしたDiv内の画像の角がはみ出してしまい、対処法がわからず悩んでいます。
どのような方法がありますでしょうか。
初歩的な質問で恐れ入りますがご教授お願いします。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>じっけんじっけん</title>
<style type="text/css">
<!--
body, p, h1, h2, h3, img, table, div, ul, li {
margin: 0px;
padding: 0px;
font-family: Helvetica, sans-serif;
}
#wrap {
background-color: #EEEEEE;
height: auto;
width: 100%;
margin: 0px;
padding-top: 100px;
padding-right: 0px;
padding-bottom: 50px;
padding-left: 0px;
}
.title {
width: 100%;
margin-right: auto;
margin-left: auto;
}
.main {
background-color: #FFFFFF;
width: 96%;
margin-right: auto;
margin-left: auto;
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);
box-shadow:0px 0px 2px #555;
margin-bottom: 100px;
border-radius: 20px;
}
p.resizeimage img {
width: 100%;
}
.itemnum {
color: #7D7D7D;
font-size: 40px;
padding: 30px;
border-bottom-width: thin;
border-bottom-color: #C0C0C0;
line-height: 50px;
float: left;
}
.price {
color: #7D7D7D;
font-size: 52px;
padding: 30px;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #C0C0C0;
line-height: 60px;
text-align: right;
}
.itemname {
color: #7D7D7D;
font-size: 40px;
padding: 30px;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #C0C0C0;
line-height: 54px;
font-weight: bold;
}
.detail {
color: #7D7D7D;
font-size: 40px;
padding: 30px;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #C0C0C0;
line-height: 48px;
}
-->
</style>
</head>
<body>
<div id="wrap">
<div class="main">
<p class="resizeimage"> <img src="p/a.jpg"> </p>
<p class="itemnum">32×13×22cm</p>
<p class="price">￥10,000</p>
<p class="itemname">アイテム</p>
<p class="itemname">Ａタイプ</p>
</div>
<div class="main">
<p class="resizeimage"> <img src="p/b.jpg"> </p>
<p class="itemnum">35×14×24cm</p>
<p class="price">￥10,000</p>
<p class="itemname">アイテム</p>
<p class="itemname">Ｂタイプ</p>
</div>
</div>
</body>
</html>
