[英]How to tightly wrap a div around an image, but also resize the image to fit a content area if resolution is larger than content area?
I'm trying to build an image viewer with specific requirements.我正在尝试构建具有特定要求的图像查看器。 They are as follows:
它们如下:
I've made a quick sketch below illustrating the desired behaviour for a portrait (top row), and landscape (bottom row).我在下面做了一个速写,说明了纵向(顶行)和横向(底行)所需的行为。 The images on the left column are the behaviour required if the image's resolution is higher than the content area.
如果图像的分辨率高于内容区域,则左侧列中的图像是所需的行为。
Color code:色标:
My primary approach so far has been to absolutely position the wrapping div around the image, which works fine until I try to get the resize to fit behaviour in. Usually this will break the tightly wrapped div.到目前为止,我的主要方法是绝对 position 围绕图像的包装 div,在我尝试调整大小以适应行为之前,它工作正常。通常这会破坏紧密包装的 div。
I can also use Javascript, but because this is a foundation to build more on top of I'd rather try keep it to HTML and CSS.我也可以使用 Javascript,但因为这是在此基础上构建更多内容的基础,我宁愿尝试将其保留为 HTML 和 CSS。
You should ensure that your div just assumes the size of the content, the img
in this case.您应该确保您的 div 只是假设内容的大小,在这种情况下为
img
。 So don't use absolute.所以不要用绝对的。 You mentioned using
grid
, so the below example will generate the a grid with a main section wrapped by 20px
padding.您提到使用
grid
,所以下面的示例将生成一个网格,其主要部分由20px
填充包裹。 Then just use the max
value on the img to make sure it does exceed the grid box's size.然后只需使用 img 上的
max
来确保它确实超过了网格框的大小。 Then center it within the grid box:然后在网格框内居中:
const width = document.querySelector( '[name=width]' ); const height = document.querySelector( '[name=height]' ); const image = document.querySelector( 'img' ); function onchange(){ image.src = `http://placehold.it/${width.value}x${height.value}`; image.style = ''; } width.addEventListener( 'change', onchange ); height.addEventListener( 'change', onchange ); window.addEventListener( 'DOMContentLoaded', () => setTimeout( onchange, 100 ) );
body, html { height: 100%; } body { padding: 0; margin: 0; } main { display: grid; grid-template: "left top right" 20px "left main right" 1fr "left bottom right" 20px / 20px 1fr 20px; height: 100%; } main div { grid-area: main; border: 1px solid red; display: inline; align-self: center; justify-self: center; } main div img { max-width: 100%; max-height: 100%; display: block; } #inputs { position: absolute; top: 0; left: 0; transform: translateY(-100%); transition: transform.4s; width: 100%; padding: 10px; background: black; color: white; } body:hover #inputs { transform: translateY(0); }
<main> <div> <img /> </div> </main> <div id="inputs"> <label>Width: <input name="width" value="200" type="number" /></label> <label>Height: <input name="height" value="200" type="number" /></label> </div>
I have included some javascript so you can test out different sizes of image.我已经包含了一些 javascript,因此您可以测试不同大小的图像。 I added a
img.style = ''
to trigger a CSS recalculate after adding the new image, otherwise its size will be incorrect on load.我添加了一个
img.style = ''
以在添加新图像后触发 CSS 重新计算,否则它的大小在加载时会不正确。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.