Как сделать все изображения разных размеров одинаковыми по высоте и ширине на странице?
я использовал
<h1> Products </h1>
<div style="width:300px;height:300px;">
<?php
foreach( $result as $r)
{
echo "<div style='
float: left;
width: 300px;
height: 300px;'>";
echo "<img alt='Missing Picture' src='img/". $r['product_img_name'] . "'>";
echo "<h2> Name: " . $r['product_name'] . " </h2>";
echo "<p> Description: " . $r['product_desc'] . "</p>";
echo "<p> Price: " . $r['price'] . "</p>";
echo "</div>";
}
но это дает мне изображения, которые перекрываются и являются слишком большими или маленькими.
Могу ли я сделать все изображения разных размеров одинакового размера и формы и в одинаковом порядке?
Решение
Эта проблема немного сложнее, чем кажется, вот один из способов ее решения.
Сначала определите div.inner Контейнер для хранения изображения и указания значения ширины и высоты (например, 100 пикселей).
Во-вторых, определите div.wrap контейнер, который будет содержать div.inner блок, а затем h2 а также p элементы. Вам необходимо обеспечить некоторое вертикальное пространство для текстовых элементов, например, дать высоту 200 пикселей div.wrap, Вы можете использовать float: left создать шаблон сетки.
Чтобы изображения масштабировались до высоты или ширины (в зависимости от исходного соотношения сторон изображения), примените max-height а также max-width 100% к изображению.
Обратите внимание, что если ваши изображения не являются абсолютно квадратными (внутренняя высота и ширина одинаковы), то у вас будет дополнительный пробел на левом и правом краях изображения (в случае изображений портретного типа) или на нижнем краю (для пейзажных изображений).
div.wrap {
width: 100px;
height: 200px;
border: 1px solid blue;
float: left;
margin: 10px;
}
div.inner {
width: 100px;
height: 100px;
text-align: center;
}
img {
max-height: 100%;
max-width: 100%;
}
h2 {
font-size: 14px;
margin: 5px;
}
p {
font-size: 12px;
margin: 5px;
}<div class="wrap">
<div class="inner">
<img src="http://placehold.it/300x300">
</div>
<h2>Title Text</h2>
<p>Some demo text goes here.</p>
</div>
<div class="wrap">
<div class="inner">
<img src="http://placehold.it/300x400">
</div>
<h2>Title Text</h2>
<p>Some demo text goes here.</p>
</div>
<div class="wrap">
<div class="inner">
<img src="http://placehold.it/400x300">
</div>
<h2>Title Text</h2>
<p>Some demo text goes here.</p>
</div>Другие решения
Вам нужно указать ширину и высоту на самом теге изображения. Лучше всего использовать стиль CSS, но вы можете сделать это и для самого тега, например так …
echo "<img style='width:300px;height:300px;' alt='Missing Picture' src='img/". $r['product_img_name'] . "'>";
Если исходные изображения не имеют квадратной формы, то увеличение ширины и высоты до 300 пикселей приведет к растяжению изображений, что может выглядеть не так хорошо.
detector