Question

从包含在div中的会话输出的图像，其中包含id＆＃39; user_image＆＃39;不符合父div的大小。

我需要它是父div的大小。我不知道为什么会这样？

    <?php 
session_start();
if(!isset($_SESSION["login_user"])){
header('location:adminLogin.php');
}
?>
<?php
session_start();
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Admin Page</title>
</head>

<body>

<div class="container">
  <div class="header"><a href="index.php"><img src="IMAGES/LOGO.png" alt="Music Search Logo"  height="90" display:block; /></a> 
  <div id="welcome_message"><h1>Welcome <?php echo  $_SESSION["login_user"] .'<div id="userImage"> <img src="' . $_SESSION["user_image"] . '" alt="user image"></div>'; ?></h1></div>

  <!--Logout-->
  <form action="endSession.php" method="post" id="end_session">
  <button type="submit" name="end_session" id="end_button">Logout</button>
  </form>
    <!-- end header --></div>
  <div class="content">

  <h1 class="top-text"> Admin Page</h1>
    <!--Search Form-->
    <form action="adminSearchMusic.PHP" method="get" class="searchform cf">
        <input type="text" id="searchMusic" name="searchMusic" placeholder="Search by Name/Genre/Year/Label" required>
            <button type="submit" id="searchBTN" name="searchBTN">Search</button>            
    </form>





    <div class="admin-buttons">
        <button class="addBTN" onclick="location.href='addRecord.php'">Add a Record</button>
        <button class="addUserBtn" onClick="location.href='addUser.php'">Add a User</button>
        <button class="addUserBtn" onClick="location.href='adminViewUsers.php'">View users</button>
        </div>


    <!--end search form-->
<!--Results Box-->
    <div class="result-box-admin">

<?php


if(isset($_SESSION["login_user"])){


  require('includes/dbconx.php');


    $sql = "SELECT * FROM music";
$result = $con->query($sql);
//if it finds no matching data it informs the user and kills the DB connextion
if(mysqli_num_rows($result) == 0){
    echo("<p>No matches found! </p>");
    die;
}
echo'<table><tr><th>Artist</th><th>Album</th><th>Year</th><th>Genre</th><th>Album Art</th><th>Edit</th><th>Delete</th></tr>';
    //while there are rows to return it will populate the table below
    while($row = mysqli_fetch_array($result)){
        echo '<tr>';
        echo'<td>' .$row['artist'].'</td>';
        echo'<td>' .$row['album'].'</td>';
        echo'<td>' .$row['releaseYear'].'</td>';
        echo'<td>' .$row['genre'].'</td>';
        echo'<td>' .'<img class="pic" src="'.$row['image'].'">'.'</td>';
            '<td>' .$row['aID'].'</td>';
        echo '<td> <a href="adminEdit.php?aID='.$row['aID'].'">Edit</a></td>';
        echo '<td> <a href="adminDelete.php?aID='.$row['aID'].'">Delete</a></td>';
        echo'</tr>';
    }//end while loop
    echo'</table>';
    //closes connection when no more rows
    mysqli_close($con);
    }
    else{
  header("location: adminLogin.php");
}
?>



     </div><!--end results box-->
   </div> <!-- end .content -->
  <div class="footer">
    <p>&copy;Derek Sweeney </p>
    <!-- end .footer --></div>
  <!-- end .container --></div>

    </body>
    </html>

和css

#userImage{
            max-width:120px;
            max-height:90px;
            overflow:hidden;
        }

Answer 1

更好的方式

只需将css应用于img标记即可。而不是其他人。

你可以这样做的一种方法（内联html方法）：

<img src="IMAGES/LOGO.png" alt="Music Search Logo" style="max-width:100%; max-height:100%; display:block;" />

或者你可以创建一个类（更好的方法）：

<img src="IMAGES/LOGO.png" class="logo-image" alt="Music Search Logo"/>

然后创建css：

.logo-image {
max-width:100%; 
max-height:100%; 
display:block;
}

notic我只将css应用于图像标记。

希望它适合你。

Answer 2

这有效

#userImage{
            max-width:120px;
            max-height:90px;
            overflow:hidden;
        }

        #userImage img {
            width: 100%;
           height: auto;

        }

图像以原始大小输出，要求它是父div的大小

2 个答案: