Question

有没有办法用css设置50％的原始图片宽度和高度？例如，我有这个代码：

    <img src="http://content.captive-portal.com/files/ign/movie-news/content/2b.jpg">

我没有在html中指定任何宽度和高度，但我希望它是原始高度和宽度的50％。我可以用CSS来做吗？

这不起作用：

img{width:50%; height:50%}

有没有办法克服这个问题？感谢

Answer 1

您可以按照此处所述缩放图像： CSS image resize percentage of itself?

img {-webkit-transform: scale(0.5); /* Saf3.1+, Chrome */
 -moz-transform: scale(0.5); /* FF3.5+ */
  -ms-transform: scale(0.5); /* IE9 */
   -o-transform: scale(0.5); /* Opera 10.5+ */
      transform: scale(0.5);
         /* IE6–IE9 */
         filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');}

Answer 2

正如我在评论中所说。在CSS中设置width: 50%只会将图像的宽度设置为其包含元素的50％。

您需要使用JavaScript实现此目的。 jQuery使它非常简单，例如：

$('img').each(function() {  
    var the_width = $(this).width(),
        new_width = Math.round(the_width / 2);
    $(this).width(new_width);
});

Answer 3

可以内联解决：

    (node:23763) UnhandledPromiseRejectionWarning: error: insert into "action" ("address", "email", "name", "password", "permissions", "phone", "photo", "verified") values ($1, $2, $3, $4, $5, $6, $7, $8) - malformed array literal: "{"sites":["create","update","view"],"isp":["create","update","view","delete"],"ipam":["view","delete"],"topology":null,"floor plan":null,"rack":["view"],"devices":null,"outage tracker":["create"],"guides":["create","update","view","delete"]}"
    at Parser.parseErrorMessage (/Users/soubhagyapradhan/Desktop/upwork/keyboo/backend/node_modules/pg-protocol/dist/parser.js:241:15)
    at Parser.handlePacket (/Users/soubhagyapradhan/Desktop/upwork/keyboo/backend/node_modules/pg-protocol/dist/parser.js:89:29)
    at Parser.parse (/Users/soubhagyapradhan/Desktop/upwork/keyboo/backend/node_modules/pg-protocol/dist/parser.js:41:38)
    at Socket.<anonymous> (/Users/soubhagyapradhan/Desktop/upwork/keyboo/backend/node_modules/pg-protocol/dist/index.js:8:42)
    at Socket.emit (events.js:315:20)
    at addChunk (_stream_readable.js:302:12)
    at readableAddChunk (_stream_readable.js:278:9)
    at Socket.Readable.push (_stream_readable.js:217:10)
    at TCP.onStreamRead (internal/stream_base_commons.js:186:23)
    (Use `node --trace-warnings ...` to show where the warning was created)
    (node:23763) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
    (node:23763) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Answer 4

... CSS myIMG {变焦：50％;}

直列CSS

    <IMG STYLE="zoom:50%;" SRC="...">

使用css设置原始图片宽度和高度的50％

4 个答案: