у меня .container > .wrapper > img.Вот задача:
img должен иметь максимально возможную ширину / высоту, сохраняя соотношение сторон, быть видимым на 100% и не превышать размер .container. - Изображение не должно превышать свой естественный размер.
- Ширина / высота изображения неизвестна.
.container, как известно, имеет фиксированную (в пикселях) ширину / высоту, ноточные размеры не известны..wrapper должен плотно прилегать к img (должен иметь ту же ширину и высоту, что и изображение).Обертка - это специальный элемент для размещения контента над изображением, например, значки.Я добавил примеры ярлыков во фрагмент, чтобы продемонстрировать это.Это как-то должно быть возможно.
Разметка:
<div class="container">
<div class="wrapper">
<div class="label">new!</div>
<img src="https://via.placeholder.com/150x300">
</div>
</div>
Я думал, что могу использовать display: block; max-height: 100% для img, но это делает не работа, потому что .wrapper (родительская высота изображения) не фиксирована и не может быть исправлена - см. Пункт 5.
Что еще я могу сделать, чтобы выполнить описанную задачу с чистымCSS?Я бы предпочел решение, которое работает в IE11, но другие также будут оценены.
РЕДАКТИРОВАТЬ: Очень важно , что контейнер и изображение могут быть любого размера.Я добавил настройки во фрагмент для тестов различных размеров.
Если изображение больше контейнера, оно должно отображаться не больше контейнера.
Если изображение меньше контейнера, оно должнорендеринг не больше натурального размера.
Должен работать с горизонтальным контейнером / вертикальным изображением И вертикальным контейнером / горизонтальным изображением.
РЕДАКТИРОВАТЬ 2: Это также очень важно что .wrapper - это , а не - просто "неприятный мешающий" элемент.Он функционален: обертка используется для размещения абсолютно позиционированного контента над изображением внутри него (например, надписи, значки), она должна поддерживать преобразования (зеркало, перевод), фильтры CSS и т. Д., Вообще говоря - все, что мы обычно делаем с элементами блока.
Детская площадка:
$(function() {
$('input[name=container-width]').on('change', function() {
$('.container').css('width', $(this).val() + 'px')
})
$('input[name=container-height]').on('change', function() {
$('.container').css('height', $(this).val() + 'px')
})
$('input[name=image-width]').on('change', function() {
var width = $(this).val()
var height = $('input[name=image-height]').val()
$('img')[0].src = 'http://via.placeholder.com/' + width + 'x' + height
})
$('input[name=image-height]').on('change', function() {
var height = $(this).val()
var width = $('input[name=image-width]').val()
$('img')[0].src = 'http://via.placeholder.com/' + width + 'x' + height
})
})
.container {
width: 200px; /* can have any value in pixels */
height: 200px; /* can have any value in pixels */
background-color: green;
}
.wrapper {
outline: 1px solid yellow;
position: relative; /* for label */
}
.label {
position: absolute;
background-color: blue;
color: white;
}
.label.-top-left {
top: 10px;
left: 10px;
}
.label.-bottom-right {
bottom: 10px;
right: 10px;
}
<h2>Settings</h2>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Container: width <input type="number" step="10" name="container-width" value="200"> height <input type="number" step="10" name="container-height" value="200">
<br>
Image: width <input type="number" step="10" name="image-width" value="150"> height <input type="number" step="10" name="image-height" value="300">
<br>
<br>
<h2>Demo</h2>
<div class="container">
<div class="wrapper">
<div class="label -top-left">new!</div>
<div class="label -bottom-right">good!</div>
<img src="http://via.placeholder.com/150x300">
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h2>How it should look like</h2>
<p>This is not the solution, because is has many hardcoded dimensions. It's just a visual demo of what I want to achieve.</p>
<div style="width: 200px; height: 200px;background-color: green">
<div style="width: 100px; height: 200px; position: relative;outline: 1px solid yellow">
<div style="position: absolute;
top: 10px;
left: 10px;
background-color: blue;
color: white;">new!</div>
<div style="position: absolute;
bottom: 10px;
right: 10px;
background-color: blue;
color: white;">good!</div>
<img style="max-width: 100%; max-height: 100%;" src="http://via.placeholder.com/150x300">
</div>
</div>