Question

我有以下HTML：

<img src="https://www.sporedev.ro/pleiade/images/Maya.jpg" class="full-img">
<img src="https://www.sporedev.ro/pleiade/cufar.png" class="treasure treasure-maya">

以下CSS：

.full-img{
    display: block;
    width: 100%;
    height: 100%;
    height: 100vh;  
}
.treasure{
height: 125px;
width:  120px;
} 

.treasure-maya{
    position: absolute; 
    top: 55%; 
    left: 44%;
    z-index: 2;
}

我使用img代替CSS更简单的方法background-image的原因是因为图像被用作图像映射。

Here is a JSFiddle.

Here is a link to my live project.

我尝试将.treasure图片调整为.full-img，这样，当.full-img缩小尺寸时，.treasure图片会保持其位置和比例。

我设法找到了一个使用媒体查询的解决方案，但它确实适得其反，因为我必须考虑很多的不同分辨率。我已经添加了三个媒体查询，只关注我需要考虑的一些分辨率（可能大约有20个媒体查询）。

我在Google和SO上找了解我的问题的解决方案，但我找不到答案。

我需要的是，.treasure img与.full-img img一起缩小<?php echo getToken(1); #201804300001 echo getToken(9999); #201804309999 echo getToken(12345); #201804301234 function getToken($input) { return date('Ymd').str_pad (substr($input, 0, 4) , 4, '0', STR_PAD_LEFT); }。

这可以实现吗？

如果有一种方法可以在CSS中执行此操作，我更喜欢这样。如果没有，我猜JS是唯一的方法，但不幸的是，当涉及到JS时，我是一个新手。

Answer 1

使用百分比而不是固定宽度设置图像宽度。我删除了图像的高度，因此保留了比例，但如果需要，可以更改此项

例如

＆＃13;

body {
  padding: 0;
  margin: 0;
}

.full-img {
  display: block;
  width: 100%;
  height: 100%;
  height: 100vh;
}

.treasure {
  width: 15%;
}

.treasure-maya {
  position: absolute;
  top: 55%;
  left: 44%;
  z-index: 2;
}

＆＃13;

<!-- This is the background image (I can't implement it in the CSS way because I use it together with <map> in my app ) -->
<img src="https://www.sporedev.ro/pleiade/images/Maya.jpg" class="full-img">

<!-- This is the image that needs to reduce its height and width, according to the full-img reduction -->
<img src="https://www.sporedev.ro/pleiade/cufar.png" class="treasure treasure-maya">

＆＃13;

流体图像根据屏幕大小调整大小

1 个答案: