Question

我有以下代码：

<div style="text-align:center;">
   <img src="http://imgurl" style="transform: scale(0.5);"/>
   <div>img name</div>
</div>

问题是原始img大小是510x255px;

变换图像后调整大小但div保持静止510x255。

如何调整大小？

谢谢，

Answer 1

如果你的图像是用固定的高度/宽度定义的，你可以尝试这样的事情：

＆＃13;

CREATE OR REPLACE FORCE VIEW "UNICA_F1"."DH_CURRENT_FUTURE_INVENTORY_VW" ("PROJ_CODE", "FLAG_PROJ_REQUEST", "OBJECT_ID", "UAP_GRID_ROW_ID", "PLACEMENT_IMPRESSIONS", "SUPPLIER_CATEGORY", "PLACEMENT_CLASH", "PLACEMENT_NAME", "PLACEMENT_AISLE_SHELF", "PLACEMENT_START_DT", "PLACEMENT_RATE", "PLACEMENT_SIZE", "PLACEMENT_END_DT", "PLACEMENT_DURATION", "PLACEMENT_ACR", "SALES_VALUE", "NOTES", "STATUS", "AD_SERVER", "UNIT_NR", "SORT_ORDER", "CATEGORY_ID", "AISLE_SHELF_ID", "PLACEMENT_COUNT", "RETAIL_ACR", "ALT_AISLE_SHELF", "PLACEMENT_SIZE2", "PLACEMENT_SIZE3", "PLACEMENT_SIZE4", "PLACEMENT_SIZE5", "CREATIVE_YN", "CPM", "CREATIVE_SIZE", "PRODUCT_ID", "SALES_AREA", "IMPRESSION_GOAL", "CLIENT_CATEGORY", "CLIENT_SUB_CAT", "BRAND_NM", "FORMAT_DESC", "IMPRESSION_CPM", "IMPRESSION_VALUE", "CREATIVE_COST", "SIZE_DESC", "DELIVERY_PROCESS", "PACKAGE_FLAG", "PACK_ID", "RETARGETING_FLAG", "BATCH_FLAG", "BASE_COST", "DISCOUNT", "CATEGORY", "SALES_MANAGER") AS 
Select
PROJ_CODE, 
FLAG_PROJ_REQUEST, 
OBJECT_ID, 
UAP_GRID_ROW_ID, 
PLACEMENT_IMPRESSIONS, 
SUPPLIER_CATEGORY, 
PLACEMENT_CLASH, 
PLACEMENT_NAME, 
PLACEMENT_AISLE_SHELF, 
PLACEMENT_START_DT, 
PLACEMENT_RATE, 
PLACEMENT_SIZE, 
PLACEMENT_END_DT, 
PLACEMENT_DURATION, 
PLACEMENT_ACR, 
SALES_VALUE, 
NOTES, 
STATUS, 
AD_SERVER, 
UNIT_NR, 
SORT_ORDER, 
CATEGORY_ID, 
AISLE_SHELF_ID, 
PLACEMENT_COUNT, 
RETAIL_ACR, 
ALT_AISLE_SHELF, 
PLACEMENT_SIZE2, 
PLACEMENT_SIZE3, 
PLACEMENT_SIZE4, 
PLACEMENT_SIZE5, 
CREATIVE_YN, 
CPM, 
CREATIVE_SIZE, 
PRODUCT_ID, 
SALES_AREA, 
IMPRESSION_GOAL, 
CLIENT_CATEGORY, 
CLIENT_SUB_CAT, 
BRAND_NM, 
FORMAT_DESC, 
IMPRESSION_CPM, 
IMPRESSION_VALUE, 
CREATIVE_COST, 
SIZE_DESC, 
DELIVERY_PROCESS, 
PACKAGE_FLAG, 
PACK_ID, 
RETARGETING_FLAG, 
BATCH_FLAG, 
BASE_COST, 
DISCOUNT,
CATEGORY,
SALES_MANAGER
from 
(  

    select b.Proj_Code, b.Flag_Proj_Request, a.*, c.Category, d.Sales_Manager
    from dh_ddp_inventory a
    inner join uap_projects b on a.Object_ID = b.Project_ID
    inner join dh_lkp_taxo_categ_vw c on a.Category_ID = c.Category_ID
    inner join dh_ddp_Request d on a.Object_ID = d.Object_ID
    where b.Flag_Proj_Request = 'Y' and a.Placement_End_Dt >= Current_date
    and b.Proj_Code not in (select Proj_Code from uap_projects where Flag_Proj_Request = 'N')

    Union


    select b.Proj_Code, b.Flag_Proj_Request, a.*, c.Category, d.Sales_Manager
    from dh_ddp_inventory a
    inner join uap_projects b on a.Object_ID = b.Project_ID
    inner join dh_lkp_taxo_categ_vw c on a.Category_ID = c.Category_ID
    inner join dh_ddp_Request d on a.Object_ID = d.Object_ID
    where b.Flag_Proj_Request = 'N' and a.Placement_End_Dt >= Current_date

)
Order By Proj_Code asc, Object_ID desc, Placement_Name asc;

＆＃13;

.block {
  display:inline-block;
  vertical-align:top;
  border:1px solid red;
  text-align:center;
}
.block img {
  height:calc(200px * var(--s,1));
  width:calc(200px * var(--s,1));
  /*You can keep only one of the above and the other will be auto*/
}

＆＃13;

您也可以这样做：

＆＃13;

<div class="block">
   <img src="https://lorempixel.com/200/200/">
   <div>img name</div>
</div>

<div class="block">
   <img src="https://lorempixel.com/200/200/" style="--s:0.5">
   <div>img name</div>
</div>

<div class="block">
   <img src="https://lorempixel.com/200/200/" style="--s:0.2">
   <div>img name</div>
</div>

＆＃13;

.block {
  display:inline-block;
  vertical-align:top;
  border:1px solid red;
  text-align:center;
}
.block img {
  width:calc(100% * var(--s,1));
}

＆＃13;

使用变换时，Div容器仍保持原始图像大小的大小

1 个答案: